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Diving In 

Android has taken the world by storm. 

Everybody wants a smartphone or tablet, and Android devices are hugely popular. In 
this book, we’ll teach you how to develop your own apps, and we’ll start by getting 
you to build a basic app and run it on an Android Virtual Device. Along the way, you’ll 
meet some of the basic components of all Android apps, such as activities and 
layouts. All you need is a little Java know-how... 
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building Interactive apps 

Apps That Do Something 

Most apps need to respond to the user in some way. 

In this chapter, you’ll see how you can make your apps a bit more interactive. You’ll 
learn how to get your app to do something in response to the user, and how to get 
your activity and layout talking to each other like best buddies. Along the way, we ll 
take you a bit deeper into how Android actually works by introducing you to R, the 
hidden gem that glues everything together. 



Activity 
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multiple activities and Intents 

State Your Intent 

Most apps need more than one activity. 

So far we’ve just looked at single-activity apps, which is fine for simple apps. But when 
things get more complicated, just having the one activity won’t cut it. We’re going to 
show you how to build apps with multiple activities, and how you can get your apps 
talking to each other using intents. We’ll also look at how you can use intents to go 
beyond the boundaries of your app and make activities in other apps on your 
device perform actions. Things are about to get a whole lot more powerful... 


Intent 
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onCreate() 


I 


- onStart() 
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-► onStop() ■ 
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onDestroy() 


the clctlVrty lifecycle 

Being an Activity 



Activities form the foundation of every Android app. 

So far you’ve seen how to create activities, and made one activity start another 
using an intent. But what’s really going on beneath the hood? In this chapter, 
we’re going to dig a little deeper into the activity lifecycle. What happens when 
an activity is created and destroyed? Which methods get called when an activity 
is made visible and appears in the foreground, and which get called when the 
activity loses the focus and is hidden? And how do you save and restore your 
activity’s state? Read on to find out. 



onRestart() 



How do acdvides really work? 

The Stopwatch app 

Add String resources 

How the activity code will work 

Add code for the buttons 

The runTimer0 method 

The full runTimerQ code 

The full StopwatchActivity code 
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VfeWs and View groups 

Enjoy the View 

You’ve seen how to arrange GUI components using a linear 
layout, but so far we’ve only scratched the surface. 

In this chapter we’ll look a little deeper and show you how linear layouts really work. 
We’ll introduce you to the frame layout, a simple layout used to stack views, and we’ll 
also take a tour of the main GUI components and how you use them. By the end of 
the chapter, you’ll see that even though they all look a little different, all layouts and GUI 
components have more in common than you might think. 


Fv-amc layouts let your views overlap one 
another. This is useful -for displaying 
text on top o( images, -for example. 
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The button 


View 


Your user interface is made up of layouts and GUI components 

LinearLayout displays views in a single row or column 

Add a dimension resource file for consistent padding across layouts 

Use margins to add distance between views 

Let’s change up a basic linear layout 
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constraint layouts 

Put Things in Their Place 

Let’s face it, you need to know how to create great layouts. 

If you’re building apps you want people to use, you need to make sure they look 
exactly the way you want. So far you’ve seen how to use linear and frame layouts, but 
what if your design is more complex? To deal with this, we’ll introduce you to Android’s 
new constraint layout, a type of layout you build visually using a blueprint. We ll 
show you how constraints let you position and size your views, irrespective of screen 
size and orientation. Finally, you’ll find out how to save time by making Android Studio 
infer and add constraints on your behalf. 



Nested layouts can be inefficient 
Introducing the Constraint Layout 

Make sure your project includes the Constraint Layout Library 

Add the String resources to strings.xml 

Use the blueprint tool 

Position views using constraints 

Add a vertical constraint 
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How to center views 

Adjust a view’s position by updating its bias 

How to change a view’s size 

How to align views 

Let’s build a real layout 

First, add the top line of views 

The Infer Constraints feature guesses which constraints to add 
Add the next line to the blueprint... 

Finally, add a view for the message 
Test drive the app 
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list Views and adapters 



Getting Organized 

Want to know how best to structure your Android app? 

You’ve learned about some of the basic building blocks that are used to create apps, 
and now it’s time to get organized. In this chapter, we’ll show you how you can take 
a bunch of ideas and structure them into an awesome app. You’ll learn how lists 
of data can form the core part of your app design, and how linking them together 
can create a powerful and easy-to-use app. Along the way, you’ll get your first 
glimpse of using event listeners and adapters to make your app more dynamic. 
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The Starbuzz app structure 
The Drink class 

The top-level layout contains an image and a list 
The full top-level layout code 
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support libraries and app bars 

Taking Shortcuts 

Everybody likes a shortcut. 

And in this chapter you’ll see how to add shortcuts to your apps using app bars. We’ll 
show you how to start activities by adding actions to your app bar, how to share content 
with other apps using the share action provider, and how to navigate up your app’s 
hierarchy by implementing the app bar’s Up button. Along the way we’ll introduce you 
to the powerful Android Support Libraries, which are key to making your apps look 
fresh on older versions of Android. 
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Make It Modular 

You’ve seen how to create apps that work in the same way 
no matter what device they’re running on. 

But what if you want your app to look and behave differently depending on whether 
it’s running on a phone or a tablet ? In this case you need fragments, modular code 
components that can be reused by different activities. We’ll show you how to create 
basic fragments and list fragments, how to add them to your activities, and how to 


get your fragments and activities to communicate with one another. 



activity_detail 


Your app needs to look great on ALL devices 
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fragments for larger interfaces 

Different Size, Different Interface 

So far we’ve only run our apps on devices with a small 

Screen. But what if your users have tablets? In this chapter you’ll see how to create 
flexible user interfaces by making your app look and behave differently depending 
on the device it’s running on. We’ll show you how to control the behavior of your app 
when you press the Back button by introducing you to the back stack and fragment 
transactions. Finally, you’ll find out how to save and restore the state of your 


fragment. 


The device screen's 
large, so I'll use the large 
version of the layout. 
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The Workout app looks the same on a phone and a tablet 

Designing for larger interfaces 
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The tablet version of the app 
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dynamic fragments 

Nesting Fragments 

So far you’ve seen how to create and use static 
fragments. But what if you want your fragments to be more dynamic? 
Dynamic fragments have a lot in common with dynamic activities, but there are 
crucial differences you need to be able to deal with. In this chapter you’ll see how 
to convert dynamic activities into working dynamic fragments. You’ll find out 
how to use fragment transactions to help maintain your fragment state. Finally, 
you’ll discover how to nest one fragment inside another, and how the child 
fragment manager helps you control unruly back stack behavior. 



Activity 


Adding dynamic fragments 434 
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design support lfbrcuy 

Swipe Right 

Ever wondered how to develop apps with a rich, slick Ul? 

With the release of the Android Design Support Library, it became much easier 
to create apps with an intuitive Ul. In this chapter, we’ll show you around some of 
the highlights. You’ll see how to add tabs so that your users can navigate around 
your app more easily. You’ll discover how to animate your toolbars so that 
they can collapse or scroll on a whim. You’ll find out how to add floating action 
buttons for common user actions. Finally, we’ll introduce you to snackbars , a way 
of displaying short, informative messages to the user that they can interact with. 
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Bits and Pizzas 
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phone. 
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recycler VfeWs and cord VieWs 

Get Recycling 

You’ve already seen how the humble list view is a key part of 

most apps. But compared to some of the material design components we’ve seen, 
it’s somewhat plain. In this chapter, we’ll introduce you to the recycler view, a more 
advanced type of list that gives you loads more flexibility and fits in with the material 
design ethos. You’ll see how to create adapters tailored to your data, and how to 
completely change the look of your list with just two lines of code. We’ll also show you 
how to use card views to give your data a 3D material design appearance. 
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There’s still work to do on the Bits and Pizzas app 

Recycler views from 10,000 feet 

Add the pizza data 

Display the pizza data in a card 

How to create a card view 

The full card_captioned__image.xml code 

Add a recycler view adapter 

Define the adapter’s view holder 

Override the onCreateViewHolder0 method 

Add the data to the card views 

The full code for GaptionedlmagesAdapter.java 

Create the recycler view 

Add the RecyclerView to PizzaFragment’s layout 
The full PizzaFragment.java code 

A recycler view uses a layout manager to arrange its views 

Specify the layout manager 

The full PizzaFragment.java code 

Make the recycler view respond to clicks 

Create PizzaDetailActivity 

The code for PizzaDetailActivity .java 

Get a recycler view to respond to clicks 

You can listen for view events from the adapter 

Keep your adapters reusable 

Add the interface to the adapter 

Implement the listener in PizzaFragment.java 
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navigation drawers 

Going Places 

You’ve already seen how tabs help users navigate your apps. 

But if you need a large number of them, or want to split them into sections, the navigation 
drawer is your new BFF. In this chapter, well show you how to create a navigation drawer 
that slides out from the side of your activity at a single touch. You’ll learn how to give it a 
header using a navigation view, and provide it with a structured set of menu items 
to take the user to all the major hubs of your app. Finally, you’ll discover how to set up a 
navigation view listener so that the drawer responds to the slightest touch and swipe. 
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Fire Up the Database 



SQLite database 


If you’re recording high scores or saving tweets, your app 
will need to Store data. And on Android you usually keep your data safe 
inside a SQLite database. In this chapter, well show you how to create a database, 
add tables to it, and prepopulate it with data, all with the help of the friendly SQLite 
helper. You’ll then see how you can cleanly roll out upgrades to your database 
structure, and how to downgrade it if you need to undo any changes. 

Back to Starbuzz 622 

Android uses SQLite databases to persist data 623 

Android comes with SQLite classes 624 

The current Starbuzz app structure 625 

Let’s change the app to use a database 626 

The SQLite helper manages your database 627 

Create the SQLite helper 628 
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You create tables using Structured Query Language (SQL) 631 
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Getting Data Out 

So how do you connect your app to a SQLite database? 

So far you’ve seen how to create a SQLite database using a SQLite helper. The 
next step is to get your activities to access it. In this chapter, we’ll focus on how you 
read data from a database. You’ll find out how to use cursors to get data from the 
database. You’ll see how to navigate cursors, and how to get access to their data. 
Finally, you’ll discover how to use cursor adapters to bind cursors to list views. 
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cursors ctnd usynctusks 

Staying in the Background 

In most apps, you’ll need your app to update its data. 

So far you’ve seen how to create apps that read data from a SQLite database. But 
what if you want to update the app’s data? In this chapter you’ll see how to get your 


app to respond to user input and update values in the database. You’ll also find 



out how to refresh the data that’s displayed once it’s been updated. Finally, you’ll 
see how writing efficient multithreaded code with AsyncTasks will keep your app 
speedy. 
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At Your Service 

There are some operations you want to keep on running, 

irrespective Of Which app has the fOCUS. If you start downloading a 
file, for instance, you don’t want the download to stop when you switch to another app. In 
this chapter we’ll introduce you to started services, components that run operations in the 
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Service destroyed 




background. You’ll see how to create a started service using the IntentService class, 
and find out how its lifecycle fits in with that of an activity. Along the way, you’ll discover how 
to log messages, and keep users informed using Android’s built-in notification service. 
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bound services and permissions 

Bound Together 

Started services are great for background operations, but 
what if you need a service that’s more interactive? in this 

chapter you’ll discover how to create a bound service, a type of service your activity 
can interact with. You’ll see how to bind to the service when you need it, and how 
to unbind from it when you’re done to save resources. You’ll find out how to use 
Android’s Location Services to get location updates from your device GPS. Finally, 
you’ll discover how to use Android’s permission model, including handling runtime 
permission requests. 
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Bound services are bound to other components 
Create a new service 
Implement a binder 

Add a getDistance() method to the service 

Update MainActivity’s layout 

Create a ServiceConnection 

Use bindService() to bind the service 

Use unbindService() to unbind from the service 

Call Odometer Service’s getDistanceO method 

The full MainActivity.java code 

The states of a bound service 

Add the AppCompat Support Library 

Add a location listener to OdometerService 

Here’s the updated OdometerService code 

Calculate the distance traveled 

The full Odometer Service.java code 

Get the app to request permission 

Check the user’s response to the permission request 

Add notification code to onRequestPermissionsResults() 

The full code for MainActivity.java 
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relative and grid layouts 

Meet the Relatives 


1 There are two more layouts you will often meet in 

Androidville. In this book we’ve concentrated on using simple linear and frame 
layouts, and introduced you to Android’s new constraint layout. But there are two more 
layouts we’d like you to know about: relative layouts and grid layouts. They’ve largely 
been superseded by the constraint layout, but we have a soft spot for them, and we 
think they’ll stay around for a few more years. 
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gradle 

The Gradle Build Tool 

Most Android apps are created using a build tool called 

Gradle. Gradle works behind the scenes to find and download libraries, compile 
and deploy your code, run tests, clean the grouting, and so on. Most of the time you 
might not even realize it’s there because Android Studio provides a graphical interface 
to it. Sometimes, however, it’s helpful to dive into Gradle and hack it manually. In this 
appendix we’ll introduce you to some of Gradle’s many talents. 
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The Android Runtime 

Ever wonder how Android apps can run on so many kinds of 

devices? Android apps run in a virtual machine called the Android runtime (ART), 
not the Oracle Java Virtual Machine (JVM). This means that your apps are quicker to 
start on small, low-powered devices and run more efficiently. In this appendix, we’ll look 
at how ART works. 
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The Android Debug Bridge 



In this book, we’ve focused on using an IDE for all your 
Android needs. But there are times when using a command-line tool can be plain 
useful, like those times when Android Studio can’t see your Android device but you just 
know it’s there. In this chapter, we’ll introduce you to the Android Debug Bridge (or 
adb), a command-line tool you can use to communicate with the emulator or Android 
devices. 
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the android emulator 

Speeding Things Up 



Ever felt like you were spending all your time waiting for the 

emulator? There’s no doubt that using the Android emulator is useful. It allows 
you to see how your app will run on devices other than the physical ones you have 
access to. But at times it can feel a little...sluggish. In this appendix, we’ll explain why 
the emulator can seem slow. Even better, we’ll give you a few tips we’ve learned for 

speeding it up. 
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leftovers 

The Top Ten Things (we didn’t cover) 

Even after all that, there’s still a little more. 

There are just a few more things we think you need to know. We wouldn’t feel right 
about ignoring them, and we really wanted to give you a book you’d be able to lift 
without extensive training at the local gym. Before you put down the book, read 
through these tidbits. 
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how to use this book 


Who is this book for? 

If you can answer “yes” to all of these: 


o 

o 

o 


Do you already know how to program in Java? 


Do you want to master Android app development, create 
the next big thing in software, make a small fortune, and 
retire to your own private island? -- 

Do you prefer actually doing things and applying the stuff 
you learn over listening to someone in a lecture rattle on 
for hours on end? 


OK, maybe -that °*e's a little 
tar-fctthed. B«*t Y°w 3°tta 

start somevjVieve, right? 


this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any of these: 


o 

o 


Are you looking for a quick introduction or reference book 
to developing Android apps? 

Would you rather have your toenails pulled out by 15 
screaming monkeys than learn something new? Do 
you believe an Android book should cover everything , 
especially all the obscure stuff you’ll never use, and if it 
bores the reader to tears in the process, then so much 
the better? 


this book is not for you. 
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the intro 


We know what you're thinking 


“How can this be a serious book on developing Android apps?” 

“What’s with all the graphics?” 

“Gan I actually learn it this way?” 

We know what your brain is thinking 

Your brain craves novelty. It’s always searching, scanning, waiting for 
something unusual. It was built that way, and it helps you stay alive. 

So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real job—recording things that matter. It doesn’t bother saving 
the boring things; they never make it past the “this is obviously not 
important” filter. 

How does your brain know what’s important? Suppose you’re out for a day 
hike and a tiger jumps in front of you—what happens inside your head and 
body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows... 

This must be important! Don’t forget it! 

But imagine you’re at home or in a library. It’s a safe, warm, tiger-free zone 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, ten days at the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s trying to 
make sure that this obviously unimportant content doesn’t clutter up scarce 
resources. Resources that are better spent storing the really big things. 

Like tigers. Like the danger of fire. Like how you should never have 
posted those party photos on your Lacebook page. And there’s no 
simple way to tell your brain, “Hey brain, thank you very much, but 
no matter how dull this book is, and how little I’m registering on the 
emotional Richter scale right now, I really do want you to keep this 
stuff around.” 


THIS 
IS ,s 
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Metacognition: thinking about thinking 

If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 

Learn how you learn. 

Most of us did not take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 

But we assume that if you’re holding this book, you really want to learn how 
to develop Android apps. And you probably don’t want to spend a lot of time. 

If you want to use what you read in this book, you need to remember what you 
read. And for that, you’ve got to understand it. To get the most from this book, 
or any book or learning experience, take responsibility for your brain. Your 
brain on this content. 

The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 

Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 

So just how DO you get your brain to treat Android 
development like it was a hungry tiger? 

There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are able to learn 
and remember even the dullest of topics if you keep pounding the same thing into your 
brain. With enough repetition, your brain says, “This doesn’t feel important to him, but 
he keeps looking at the same thing over and over and over , so I suppose it must be.” 

The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 

A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 

But pictures and conversational style are just the beginning... 
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Here's what WE did 

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing it refers to, as opposed to in a caption or buried in the body 
text somewhere. 

We used redundancy , saying the same thing in different ways and with different media types, 
and multiple senses , to increase the chance that the content gets coded into more than one area 
of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content , because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor , surprise , or interest. 

We used a personalized, conversational style , because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included activities , because your brain is tuned to learn and remember more when 
you do things than when you read about things. And we made the exercises challenging-yet- 
doable, because that’s what most people prefer. 

We used multiple learning styles , because you might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, and someone else just wants to see 
an example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain , because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view, 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges , with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it—you can’t get your body in shape just by watching people at the 
gym. But we did our best to make sure that when you’re working hard, it’s on the right things. 
That you’re not spending one extra dendrite processing a hard-to-understand example, 
or parsing difficult, jargon-laden, or overly terse text. 

We used people. In stories, examples, pictures, and the like, because, well ,you’re a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU can do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cut this out dhd sti£k it 
° h y°u<r re-(Vigerator. 


0 Slow down. The more you understand, the 
less you have to memorize. 

Don’t just read. Stop and think. When the book asks 
you a question, don’t just skip to the answer. Imagine 
that someone really is asking the question. The 
more deeply you force your brain to think, the better 
chance you have of learning and remembering. 

0 Do the exercises. Write your own notes. 

We put them in, but if we did them for you, that 
would be like having someone else do your workouts 
for you. And don’t just look at the exercises. Use a 
pencil. There’s plenty of evidence that physical 
activity while learning can increase the learning. 

0 Read “There Are No Dumb Questions.” 

That means all of them. They’re not optional 
sidebars, they We part of the core content! 

Don’t skip them. 

A Make this the last thing you read before bed. 
Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the book 
down. Your brain needs time on its own, to do more 
processing. If you put in something new during that 
processing time, some of what you just learned will 
be lost. 

O Talk about it. Out loud. 

Speaking activates a different part of the brain. If 
you’re trying to understand something, or increase 
your chance of remembering it later, say it out loud. 
Better still, try to explain it out loud to someone else. 
You’ll learn more quickly, and you might uncover 
ideas you hadn’t known were there when you were 
reading about it. 


0 Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 

0 Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

0 Feel something. 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

0 Write a lot of code! 

There’s only one way to learn to develop Android 
apps: write a lot of code. And that’s what you’re 
going to do throughout this book. Coding is a skill, 
and the only way to get good at it is to practice. 
We’re going to give you a lot of practice: every 
chapter has exercises that pose a problem for you 
to solve. Don’t just skip over them—a lot of the 
learning happens when you solve the exercises. We 
included a solution to each exercise—don’t be afraid 
to peek at the solution if you get stuck! (It’s easy 
to get snagged on something small.) But try to solve 
the problem before you look at the solution. And 
definitely get it working before you move on to the 
next part of the book. 
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Read me 


This is a learning experience, not a reference book. We deliberately stripped out everything 
that might get in the way of learning whatever it is we’re working on at that point in the 
book. And the first time through, you need to begin at the beginning, because the book 
makes assumptions about what you’ve already seen and learned. 


We assume you’re new to Android, but not to Java. 

We’re going to be building Android apps using a combination of Java and XML. We 
assume that you’re familiar with the Java prorgamming language. If you’ve never done any 
Java programming at all, then you might want to read Head First Java before you start on 
this one. 

We start off by building an app in the very first chapter. 

Believe it or not, even if you’ve never developed for Android before, you can jump right 
in and start building apps. You’ll also learn your way around Android Studio, the official 
IDE for Android development. 

The examples are designed for learning. 

As you work through the book, you’ll build a number of different apps. Some of these are 
very small so you can focus on a specific part of Android. Other apps are larger so you can 
see how different components fit together. We won’t complete every part of every app, but 
feel free to experiment and finish them yourself. It’s all part of the learning experience. The 
source code for all the apps is here: https://tinyurl.com/HeadFirstAndroid. 

The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. Don’t skip the exercises. 
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The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you Ve learned. Most reference books 
don’t have retention and recall as a goal, but this book is about learning , so you’ll see 
some of the same concepts come up more than once. 

The Brain Power exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning 
experience of the Brain Power activities is for you to decide if and when your answers 
are right. In some of the Brain Power exercises, you will find hints to point you in the 
right direction. 
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^ Diving In + 



Android has taken the world by storm. 

Everybody wants a smartphone or tablet, and Android devices are hugely popular. In this 
book, we’ll teach you how to develop your own apps, and we’ll start by getting you to 
build a basic app and run it on an Android Virtual Device. Along the way, you’ll meet some 
of the basic components of all Android apps, such as activities and layouts. All you 
need is a little Java know-how... 


this is a new chapter 









android overview 


Welcome to Androidville 

Android is the world’s most popular mobile platform. At the 
last count, there were over two billion active Android devices 
worldwide, and that number is growing rapidly. 

Android is a comprehensive open source platform based 
on Linux and championed by Google. It’s a powerful 
development framework that includes everything you need 
to build great apps using a mix of Java and XML. What’s 
more, it enables you to deploy those apps to a wide variety of 
devices—phones, tablets, and more. 

So what makes up a typical Android app? 


We’re going to huilJ our 
Android apps using a mixture 
ol Java and XML. We’ll 
explain things along the way, 
hut you’ll need to have a lair 
understanding ol Java to get 
the most out ol this hook. 


Layouts define what each screen 
looks like 

A typical Android app is composed of one 
or more screens. You define what each 
screen looks like using a layout to define its 
appearance. Layouts are usually defined in 
XML, and can include GUI components such 
as buttons, text fields, and labels. 

Activities define what the app 
does 

Layouts only define the appearance of the app. 
You define what the app does using one or 
more activities. An activity is a special Java 
class that decides which layout to use and 
tells the app how to respond to the user. As 
an example, if a layout includes a button, you 
need to write Java code in the activity to define 
what the button should do when you press it. 


Layouts 
tell Android 
what the 

screens in 
your app 
look like. 


Activities define 
what the app — y 

should do. 



o o 


Sometimes extra resources are needed too 

In addition to activities and layouts, Android apps often need 
extra resources such as image files and application data. You 
can add any extra files you need to the app. 

Android apps are really just a bunch of files in particular 
directories. When you build your app, all of these files get 
bundled together, giving you an app you can run on your 
device. 
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The Android platform dissected 

The Android platform is made up of a number of 
different components. It includes core applications such 
as Contacts, a set of APIs to help you control what your 
app looks like and how it behaves, and a whole load of 
supporting files and libraries. Here’s a quick look at how 
they all fit together: 


o 
O 

Don’t worry if this seems 
like a lot to take in. 

We’re just giving you an 
overview of what’s included in 
the Android platform. We’ll explain the different 
components in more detail as and when we 
need to. 



f Relax 


Android comes with a 
set of core applications 
such as Contacts, Phone, 
Calendar, and a browser. 

When you build apps, you 
have access to the same 
APIs used by the core 
applications. You use 
these APIs to control 
what your app looks like 
and how it behaves. 

Underneath the 
application framework 
lies a set of C and C++ 
libraries. These libraries 
get exposed to you 
through the framework 
APIs. 


Underneath everything 
else lies the Linux kernel. 
Android relies on the 
kernel for drivers, and 
also core services such 
as security and memory 
management. 


/ 

i 


Applications 


Home 


Contacts 


Phone 


Browser 


implication Framework 


Activity 

Window 

Content 

View 

Manager 

Manager 

Providers 

System 



Package 

Telephony 

Resource 

Location 

Notification 

Manager 

Manager 

Manager 

Manager 

Manager 


Libraries 


Surface 

Manager 

Media 

Framework 

SQLite 

OpenGL | 

ES 

FreeType 

WebKit 

SGL 

SSL 

libc 


Android Runtime 


Core 

Libraries 


Linux Kernel 


Display 

Driver 


Camera 

Driver 


Flash Memory 
Driver 


Binder (IPC) 
Driver 

Keypad 

Driver 


WiFi 

Driver 


Audio 

Drivers 


Power 

Management 


The Android 
runtime 
comes with a 
set of core 
libraries that 
implement 
most of 
the Java 
programming 
language. 
Each Android 
app runs 
in its own 
process. 


The great news is that all of the powerful Android libraries 
are exposed through the APIs in the application framework, 
and it’s these APIs that you use to create great Android 
apps. All you need to begin is some Java knowledge and a 
great idea for an app. 
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steps 


Here's what we're going to do 


So let’s dive in and create a basic Android app. There are just 
a few things we need to do: 


o 


Set up a development environment. 

We need to install Android Studio, which 
includes all the tools you need to develop 
Android apps. 


© 


Build a basic app. 

We’ll build a simple app using Android 
Studio that will display some sample text on 
the screen. 



i "a Q 11:57 

My First App 



Q Event loo ® Cradle console 




© 


Run the app in the Android emulator. 

We’ll use the built-in emulator to see the app 
up and running. 


Hello World! 


i 

m A Q 1:12 

Q My First App 



© 



Change the app. 

Finally, we’ll make a few tweaks to the app we 
created in step 2, and run it again. 


-there-,scce no 

Dumb Questions 


Sup doge 


O: 


Are all Android apps developed 
in Java? 


n How much Java do I need to know 
for Android app development? 


O: Do I need to know about Swing 
and AWT? 


You can develop Android apps in 
other languages, too. Most developers use 
Java, so that’s what we’re covering in this 
book. 


You really need experience with Java 
SE (Standard Edition). If you’re feeling 
rusty, we suggest getting a copy of Head 
First Java by Kathy Sierra and Bert Bates. 


Android doesn’t use Swing or AWT, 
so don’t worry if you don’t have Java 
desktop GUI experience. 
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Your development environment 

Java is the most popular language used to develop Android applications. _ 

Android devices don’t run .class and .jar files. Instead, to improve speed 
and battery performance, Android devices use their own optimized 
formats for compiled code. That means that you can’t use an ordinary 
Java development environment—you also need special tools to convert 
your compiled code into an Android format, to deploy them to an 
Android device, and to let you debug the app once it’s running. 

All of these come as part of the Android SDK. Let’s take a look at 
what’s included. 


getting started 

Set up environment 
Build app 
Run app 
Change app 


The Android SPK 

The Android Software Development Kit contains the libraries and tools 
you need to develop Android apps. Here are some of the main points: 


SDK Platform 

There’s one of these for each 
version of Android. 


SDK Tools 

Tools for debugging and testing, 
plus other useful utilities. The 
SDK also features a set of 
platform dependent tools. 

Sample apps 

If you want practical code 
examples to help you understand 
how to use some of the APIs, the 
sample apps might help you. 



Documentation 

So you can access the latest 
API documentation offline. 


Android support 

Extra APIs that aren’t available 
in the standard platform. 


Google Play Billing 

Allows you to integrate billing 
services in your app. 


Android Studio is a special version of IntelliJ IPEA 

IntelliJ IDEA is one of the most popular IDEs for Java development. 
Android Studio is a version of IDEA that includes a version of 
the Android SDK and extra GUI tools to help you with your app 
development. 

In addition to providing you with an editor and access to the tools and 
libraries in the Android SDK, Android Studio gives you templates you 
can use to help you create new apps and classes, and it makes it easy to 
do things such as package your apps and run them. 
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installation 


Install Android Studio 

Before we go any further, you need to install Android Studio on 
your machine. We’re not including the installation instructions 
in this book as they can get out of date pretty quickly, but you’ll 
be fine if you follow the online instructions. 


Set up environment 
Build app 
Run app 
Change app 


We re usmg Android Studio version 2.3. 
You II need to use this version or above 
b> get the **ost out ot this book. 


First, check the Android Studio system requirements here: 


http://developer, android, com/sdk/index. html#Requirements ^—-_^ 

Then follow the Android Studio installation instructions here: / 

https://developer, android, com/sdk/installing/index. html?pkg—studio 


£joo^le sometimes than^es their 
URLs. |-f these URLs don t 
work, seardh -for Android Studio 
and you should -find them. 


Once you’ve installed Android Studio, open it and follow the 
instructions to add the latest SDK tools and Support Libraries. 

When you’re done, you should see the Android Studio welcome 
screen. You’re now ready to build your first Android app. 


This is the Android 
Studio welcome 
screen. It includes a 
set o-P options -for 
things you tan do. 




0 o 

Welcome to Android Studio 






Android Studio 

Version 2.3 



& Start a new Android Studio project 

El Open an existing Android Studio project 

♦ Check out project from Version Control ▼ 

& Import project (Eclipse ADT, Cradle, etc.) 

& Import an Android code sample 

# Configure ▼ Get Help ▼ 
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Dumb Questions 


You say we’re going to use 
Android Studio to build the Android 
apps. Do I have to? 

Strictly speaking, you don’t have to 
use Android Studio to build Android apps. 
All you need is a tool that will let you write 
and compile Java code, plus a few other 
tools to convert the compiled code into a 
form that Android devices can run. 

Android Studio is the official Android IDE, 
and the Android team recommends using 
it. But quite a lot of people use IntelliJ IDEA 
instead. 


n Can I write Android apps without 
using an IDE? 


It’s possible, but it’s more work. Most 
Android apps are now created using a build 
tool called Gradle. Gradle projects can be 
created and built using a text editor and a 
command line. 


% Most apps are built using Gradle? 
I thought you said most developers use 
Android Studio. 


Android Studio provides a graphical 
interface to Gradle, and also to other tools 
for creating layouts, reading logs, and 
debugging. 



A build tool? So is gradle like 


ANT? 


You can find out more about Gradle in 
Appendix II. 


It’s similar, but Gradle is much more 
powerful than ANT. Gradle can compile and 
deploy code, just like ANT, but it also uses 
Maven to download any third-party libraries 
your code needs. Gradle also uses Groovy as 
a scripting language, which means you can 
easily create quite complex builds with Gradle. 


Puild a basic app 


Now that you’ve set up your development environment, you’re 
ready to create your first Android app. Here’s what the app will look 
like: 


This is the 
o( the applieatioi 


i 

^ Q 11:57 ■ 

0 My First App 



This is a very sir* 
app, but that's al 
— need -for your vev 
-first Android apy 


e 

you 


Hello World! 

Tb eve’ll be a small piece 
of sample te*t vi^bt beve 
that Andvoid Studio will 
put m -for us. 
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create project 


You vc Completed this step 
now, so we*vc checked it oil 


How to build the app 

Whenever you create a new app, you need to create a 
new project for it. Make sure you have Android Studio 
open, and follow along with us. 



Set up environment 
Build app 
Run app 
Change app 


1. Create a new project 

The Android Studio welcome screen gives you a number of options. 
We want to create a new project, so click on the option for “Start a 
new Android Studio project.” 



Any projects you create 
will appear here. This is our 
first project, so this area is 
Currently empty* 
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How to build the app (continued) 

l. Configure the project 



getting started 

Set up environment 
Build app 
Run app 
Change app 


You now need to configure the app by telling Android Studio what 
you want to call it, what company domain to use, and where you 
would like to store the files. 

Android Studio uses the company domain and application name to 
form the name of the package that will be used for your app. As an 
example, if you give your app a name of “My First App” and use 
a company domain of “hfad.com”, Android Studio will derive a 
package name of com. hf ad. my first app. The package name 
is really important in Android, as it’s used by Android devices to 
uniquely identify your app. 

Enter an application name of “My First App”, enter a company 
domain of “hfad.com”, uncheck the option to include C++ support, 
and accept the default project location. Then click on the Next 
button. 



Watch it! 


The package 
name must 
stay the same 
for the lifetime 
of your app. 


It’s a unique identifier for your 
app and used to manage 
multiple versions of the same 
app. 



Some versions ot Android 
Studio mjy have aw e*tra 
option asking it you want 
to include &>tlin support 
UnCheCk this option it it's 
there- 


The wizard torms the 
package name by combining 
the application name and 
the Company domain. 
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api level 


V/ 


How to build the app (continued) 

3. Specify the minimum $PK 


Run app 
Change app 


You now need to indicate the minimum SDK of Android your app will use. 

API levels increase with every new version of Android. Unless you only want 
your app to run on the very newest devices, you’ll probably want to specify one 
of the older APIs. 

Here, we’re choosing a minimum SDK of API level 19, which means it will be S 

able to run on most devices. Also, we’re only going to create a version of our 
app to run on phones and tablets, so we’ll leave the other options unchecked. 

When you’ve done this, click on the Next button. 


I e o 


Create New Project 


The minimum 
is -the lowest version your 
app will support V^our app 
will run on devices with 

this level API or higher. It 
wont run on devices with 
a lower API- 




Target Android Devices 


Select the form factors your app will run on 

Different platforms may require separate SDKs 

0 Phone and Tablet 

l Minimum SDK | API 19: Android 4.4 (KitKat) 


Lower API feveis target more devices, but have fewer features available. 

By targeting API 19 and later, your app will run on approximately 

73.9% of the devices 

that are active on the Coogle Play Store. 

Help me choose 


0 Wear 

Minimum SDK 
□ TV 

Minimum SDK 
01 Android Auto 
0 Class 

Minimum SDK 


APi 21: Android 5.0 {Lollipop) 


API Lollipop: Android 5.0 (Lollipop preview) 


Class Development Kit Preview (API 19) 


Cancel 


Previous 


Next 


Finish 
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- A^Jr 

YouVe probably heard a lot of things about Android that sound 
tasty, like Jelly Bean, KitKat, Lollipop, and Nougat. So what’s 
with all the confectionary? 


oid Versions Tip 0]®$e 




Android versions have a version number and a codename. The 
version number gives the precise version of Android (e.g., 7.0), 
while the codename is a more generic “friendly” name that may 
cover several versions of Android (e.g., Nougat). The API level 
refers to the version of the APIs used by applications. As an 
example, the equivalent API level for Android version 7.1.1 is 25. 


Version 

Codename 

API level 

1.0 


1 

1.1 


2 

1.5 

Cupcake 

3 

1.6 

Donut 

4 

2.0-2.1 

Eclair 

5-7 

2.2.x 

Froyo 

8 

2.3-2.3.7 

Gingerbread 

9-10 

3.0-3.2 

Honeycomb 

11-13 

4.0-4.0.4 

Ice Cream Sandwich 

14-15 

4.1 -4.3 

Jelly Bean 

16-18 

4.4 

KitKat 

19-20 

5.0-5.1 

Lollipop 

21-22 

6.0 

Marshmallow 

23 

7.0 

Nougat 

24 

7.1-7.1.2 

Nougat 

25 


'S Hardly 3hyone uses 
' these versions anymore. 


j 


i Most devices use 
one of these API S * 


When you develop Android apps, you really need to consider 
which versions of Android you want your app to be compatible 
with. If you specify that your app is only compatible with the 
very latest version of the SDK, you might find that it can’t be 
run on many devices. You can find out the percentage of devices 
running particular versions here: https://developer.android.com/ 
about/dashboards/index, html. 


you are here ► 


11 

























50,000 feet 


Activities and layouts from 50,000 feet 

The next thing you’ll be prompted to do is add an activity to your project. 
Every Android app is a collection of screens, and each screen is composed 
of an activity and a layout. 

An activity is a single, defined thing that your user can do. You 

might have an activity to compose an email, take a photo, or find a contact. 
Activities are usually associated with one screen, and they’re written in Java. 

A layout describes the appearance of the screen. Layouts are written 
as XML files and they tell Android how the different screen elements are 
arranged. 

Let’s look in more detail at how activities and layouts work together to 
create a user interface: 



Set up environment 
Build app 
Run app 
Change app 


Layouts define ho 
the user interface 
presented. 


w 

is 


Activities define 
actions. 


o 


The device launches 
your app and creates 
an activity object. 


Q The activity object 
specifies a layout. 


^ The activity tells 

Android to display the 
layout onscreen. 



O 


The user interacts 
with the layout that's 
displayed on the device. 


© 


The activity responds 
to these interactions by 
running application code. 


Q The activity updates 
the display... 


Q ...which the user sees 
on the device. 



Now that you know a bit more about what activities and layouts are, 
let’s go through the last couple of steps in the Create New Project 
wizard and get it to create an activity and layout. 
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getting started 

Set up environment 
Build app 
Run app 
Change app 

4. Add aw activity 

The next screen lets you choose among a series of templates you 
can use to create an activity and layout. We’re going to create 
an app with an empty activity and layout, so choose the Empty 
Activity option and click the Next button. 


v 


How to build the app (continued) 


0 O O 


Create New Project 




Add an Activity to Mobile 


Add No Activity 


Basic Activity 


Bottom Navigation Activity 


Empty Activity 


Cancel Previous i Next 


Finish 


There are other types 
o-f activity you tan 

. dhoose -from, but tor 
this e*erdise make sure 
you seledt the Empty 
Adtivity option- 
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customize activity 


How to build the app (continued) 

5. Customize the activity 



You will now be asked what you want to call the screen’s activity and layout. 
Enter an activity name of “MainActivity”, make sure the option to generate a 
layout file is checked, enter a layout name of “activity_main”, and then uncheck 
the Backwards Compatibility (AppCompat) option. The activity is a Java class, 
and the layout is an XML file, so the names we’ve given here will create a Java 
class file called MainActivity.java and an XML file called activity_main. xml. 


When you click on the Linish button, Android Studio will build your app. 


Set up environment 
Build app 
Run app 
Change app 


|8QO 


Create New Project 


/x 


Customize the Activity 


Creates a new empty activity 


Activity Name: 


Main Activity 

l?[ Generate Layout File 



Layout Name: activity_main 


r 


Backwards Compatibility (AppCompat) 


Empty Activity 


Mndhedk -the Backwards 
Compatibility (AppCompat) optic 
Y<x* II -find out more about this 
setting later in the book. 


Name the adtwity 
"Ma'mAfrtivity” 

.a«d the layout 

"adtWity__">3in' ’ 

Also make sure the 
option to generate 
the layout is 
dhedked 


If false, this activity base class will be Activity instead of 
Ap p C o m p at Act ivi ty 


Cancel | Previous | Finish | 
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getting started 

You've just created your first Android app 

So what just happened? 


v/ Set up environment 
Build app 
Run app 
Change app 


O 

© 


The Create New Project wizard created a project for your app, 
configured to your specifications. 

You defined which versions of Android the app should be compatible with, and 
the wizard created all of the files and folders needed for a basic valid app. 

The wizard created an activity and layout with template code. 

The template code includes layout XML and activity Java code, with sample 
“Hello World!” text in the layout. 


When you finish creating your project by going through the 
wizard, Android Studio automatically displays the project for 
you. 


Here’s what our project looks like (don’t worry if it looks 
complicated—we’ll break it down over the next few pages): 


This is i he yrojeti m Android Studio. 


/ 
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folder structure 


Android Studio creates 
a complete folder structure for you 



Set up environment 
Build app 
Run app 
Change app 


An Android app is really just a bunch of valid files in a particular folder structure, 
and Android Studio sets all of this up for you when you create a new app. The 
easiest way of looking at this folder structure is with the explorer in the leftmost 
column of Android Studio. 


The explorer contains all of the projects that you currently have open. To expand 
or collapse folders, just click on the arrows to the left of the folder icons. 


Clidk on the arrow 

here and dhoose 
the Projedt option 
to see the -files and 
-folders that make 
up your projedt- 

This is the 
name o-f 

the projedt- 


These -Piles and 
-Polders are all 
indluded in your 
projedt- 



The folder structure includes 
different types of files 

If you browse through the folder structure, you’ll 
see that the wizard has created various types of 
files and folders for you: 


o 

o 

o 

o 


Java and XML source files 

These are the activity and layout files for 
your app. 

Android-generated Java files 

There are some extra Java files you 
don’t need to touch that Android Studio 
generates for you automatically. 

Resource files 

These include default image files for 
icons, styles your app might use, and any 
common String values your app might 
want to look up. 

Android libraries 

In the wizard, you specified the minimum 
SDK version you want your app to be 
compatible with. Android Studio makes 
sure your app includes the relevant 
Android libraries for that version. 


o 


Configuration files 

The configuration files tell Android what’s 
actually in the app and how it should run. 


Let’s take a closer look at some of the key files and 
folders in Androidville. 
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Useful files in your project 

Android Studio projects use the Gradle build system to compile and 
deploy apps. Gradle projects have a standard structure. Here are 
some of the key files and folders you’ll be working with: 



getting started 

Set up environment 
Build app 
Run app 
Change app 


The root folder 
is the name of 
your project. All 
the files for your 
project go in here. 


□ 

MyFirstApp 

P 


-The app folder is a 


^ module in your project. 

a 

HB 


>^"^The build folder contains files that 
^ Android Studio creates for you. You 


don't usually edit anything in this folder. 


PD 


generated/source 


o 

r/debug 



cd 


Every Android project needs a file 
called R.java, which is created for 
you and which lives in the generated/ 
source folder. Android uses this file 
to keep track of resources in the app. 


The src folder contains 
source code you write 
and edit. 


The java folder contains any 
Java code you write. Any 
activities you create live here. 


You can find app resources in the 
res folder. For example, the layout 
subfolder contains layouts, and the 
values subfolder contains resource 
files for values such as Strings. You 
can get other types of resources 
too. 


Every Android app must include a 
file called AndroidManifest.xml 
at its root. The manifest file 
contains essential information- 
about the app, such as what 
components it contains, required 
libraries, and other declarations. 


com/hfad/myfirstapp 

l 


j 


TO 


R.java 



activity_main.xml 


PD 


values 



strings.xml 


AndroidManifest.xml 


Main Activity.java defines 
an activity. An activity tells 
Android how the app should 
interact with the user. 


activity_main.xml defines a 
layout. A layout tells Android 
how your app should look. 


strings.xml is a String resource 
file. It includes Strings such as 
the app's name and any default 
text values. Other files such as 
layouts and activities can look up 
text values from here. 


you are here ► 


17 












meet the editors 


Edit code with the Android Studio editors 

You view and edit files using the Android Studio editors. Double-click 
on the file you want to work with, and the file’s contents will appear in 
the middle of the Android Studio window. 



Set up environment 
Build app 
Run app 
Change app 


The code editor 

Most files get displayed in 
the code editor, which is 
just like a text editor, but 
with extra features such 
as color coding and code 
checking. 


Double-click on -the -file 
in the explorer and the 
tile Contents appear in — 
the editor panel. 


| 0 O O activity main.xml - MyFirstApp - [-/AndroidStudioProjects/MyFirstApp] J 

o m 0 

E* MyFirstAf 

¥ + 
*p) E«P 

& 0 Dl 

P D src t 

A A 

] main ^ 

ires E 

\ 1 C*app - ► 

layout <> activity_main.xml 

SL 

© 

CT: | 

j. 



The design editor 

If you’re editing a 
layout, you have an 
extra option. Rather 
than edit the XML 
(such as that shown on 
the next page), you can 
use the design editor, 
which allows you to 
drag GUI components 
onto your layout, and 
arrange them how you 
want. The code editor 
and design editor give 
different views of the 
same file, so you can 
switch back and forth 
between the two. 


© 




E MyFirstApp -/AndroidStudioProjects/I j 

► E] .gradle 

► El .idea 
▼ Eg app 

► El build 
El libs 
▼ Elsrc 

► E]androidTest 
▼ E] main 

▼ Eljava 

t E]com.hfad.myfirstapp 
<S)*b MainActivity 

▼ Cm res 

Eldrawable 
▼ El layout 

activity_main.xml 


► Elmipmap-hdpi 

► E] mipmap-mdpi 


■■ activity_main.xml x c MainActivity.java x 


android.support.const raint.Const raintLayout 


<?xml version=”1.0" encoding= n utf-8 n ?> 

<and roid.support.const raint.Const raintLayout xmlns: and roid="ht t ft 
xmlns: app=" http://schemas.android.com/apk/res-auto" 
xmlns: tools- 'http://schemas.android.com/tools" 
android : layout_width="match_parent" 
android : layout_height= ,, match_parent" 
tools : context="com. hfad.myfirstapp.HainActivity"> 

<TextView 

and roid : layout_width= ,, wrap_content" 
and roid : layout_height="wrap_content" 
android :text=”Hello World!" 
app :layout_constraintBottom_toBottomOf="pa rent” 
app: layout_constraintLeft_toLeftOf="pa rent" 
app :layout_constraintRight_toRightOf="pa rent" 

9 app:layout_constraintTop_toTopOf="parent M /> 

</android.support.constraint.ConstraintLayout> 


O O 


activity main.xml - MyFirstApp - [-/AndroidStudioProjects/MyFirstApp] 


BC5i**|XlSl[5i;ei& 

MyFirstApp E app E] src E main Cjj res 
Packages ► © 4 s 


<? < \ I CBapp - | ► * «. III G 


n layout <> activity_main.xml 


GEL 


▼ E MyFirstApp -/AndroidStudioProjects/MyFir 

► E. gradle 

► E.idea 
▼ ns app 

► E build 
Elibs 
▼ Esrc 

► EandroidTest 
▼ E main 

▼ Ejava 

▼ Ecom.hfad.myfirstapp 

(c) 'b MainActivity 

▼ Cares 

Edrawable 

▼ El layout 


actrvity_main.xml 


E mipmap-hdpi 
E mipmap-mdpi 
E mipmap-xhdpi 
E mipmap-xxhdpi 
E mipmap-xxxhdpi 
E values 

i AndroidManifest.xml 


► Etest 
1=1 .oitianore 


m activity_main.xml x c MainActivity.java x 


Palette 

All 

Widgets 

Text 

Layouts 

Containers 

Images 

Date 

Transitions 

Advanced 


Q *• I* 
Ab TextView 
a* Button 
E ToggleButton 
D CheckBox 
(•) RadioButton 
V CheckedText’ 
= Spinner 
O ProgressBar 
— ProgressBar ( 


S ED ili^ 
\d \ *x +* 


□ Nexus 4- M2! 

s a- is-- u 


0AppTheme Langii 
0 19* © Q 


Component Tree ■0" r 1^" 

▼ M ConstraintLayout 

Ab TextView - "Hello World!" 

You dictate 
whieh edito\r 
youVc using with 
these tabs. 


Design Text 


ylv. can ed il layowb wsin^ -fche 


■; 0: Messages M Terminal >$• 6: Android Monitor TQSg— 

Visual earcoir uy 

□ Cradle build finished in 5s 314ms (2 minutes ago) 

dv-off'mg eoim^onents- 
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getting started 


% + 

-+ Nvy - 

• + 

Here’s the code from an example layout file (not the one Android Studio 
generated for us). We know you’ve not seen layout code before, but just 
see if you can match each of the descriptions at the bottom of the page to the 
correct lines of code. We’ve done one to get you started. 

activity_main.xml 

<?xml version="l.0" encoding="utf-8"?> 

CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingLeft="16dp" 
android:paddingRight="16dp" 
android:paddingTop="16dp" 
android:paddingBottom="16dp" 
android:orientation="vertical" 

tools:context="com.hfad.myfirstapp.MainActivity"> 


CTextView 


android:layout_width="wrap_content" 


android:layout_height="wrap_content" 


android:text="Hello World!" /> 


</LinearLayout> 


Add padding to the screen 
margins. 



Include a <TextView> GUI 
component for displaying 
text. 

Make the layout the same 
width and height as the 

Make the GUI component just screen size on the device, 

large enough for its content. 


you are here ► 
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solution 



Here’s the code from an example layout file (not the one Android Studio 
generated for us). We know you’ve not seen layout code before, but just 
see if you can match each of the descriptions at the bottom of the page to the 
correct lines of code. We’ve done one to get you started. 

activity_main.xml 

<?xml version="l.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android :layout_width="mat r, ' h ) 

android: layout_height="m£ 
android: paddingLef t=" 16d]c 
android:paddingRight="16c 
android:paddingTop="16dp' 
android:paddingBottom="1 i 
android:orientation="vert 
tools:context="com.hfad.n 

CTextView 

.android:layout_width= 

1 android:layout_height 
android:text="Hello V 
'Layout> 



Add padding to the screen 
margins. 


nclude a <TextView> GUI 
component for displaying 


text. 



Make the layout the same 


width and height as the 
screen size on the device. 


Make the GUI component just 
large enough for its content. 
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getting started 



+ #*V 


Now let’s see if you can do the same thing for some activity code. This 
is example code, and not necessarily the code that Android 
Studio will have generated for you. Match the descriptions below 
to the correct lines of code. 

MainActivity.java 

package com.hfad.myfirstapp; 

import android.os.Bundle; 
import android.app.Activity; 

public class MainActivity extends Activity { 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 


This is the package name. 


Implement the onCreate () 
method from the Activity 
class. This method is called 
when the activity is first 
created. 


These are Android classes 
used in MainActivity. 


Specify which layout to use. 


MainActivity extends the 
Android class 

android.app.Activity. 


you are here ► 
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another solution 





Now let’s see if you can do the same thing for some activity code. This 
is example code, and not necessarily the code that Android 
Studio will have generated for you. Match the descriptions below 
to the correct lines of code. 


MainActivity.java 
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Run the app in the Android emulator 

So far you’ve seen what your Android app looks like in Android 
Studio and got a feel for how it hangs together. But what you 
really want to do is see it running, right? 

You have a couple of options when it comes to running your 
apps. The first option is to run them on a physical device. But 
what if you don’t have one with you, or you want to see how 
your app looks on a type of device you don’t have? 

In that case, you can use the Android emulator that’s built 
into the Android SDK. The emulator enables you to set up one 
or more Android virtual devices (AVDs) and then run your 
app in the emulator as though it’s running on a physical device. 


So what does the emulator look like? 

Here’s an AVD running in the Android emulator. It looks just 
like a phone running on your computer. 


getting started 

Set up environment 
Build app 
Run app 
Change app 

The Android emulator allows 
you to run your app on an 
Android virtual device (AVD), 
which behaves just like a 
physical Android device. You 
can set up numerous AVDs, 
each emulating a different 
type of device. 



The emulator recreates the 
exact hardware environment 
of an Android device: from its 
GPU and memory through to 
the sound chips and the video 
display. The emulator is built 
on an existing emulator called 
QEMU (pronounced “queue em 
you”), which is similar to other 
virtual machine applications you 
may have used, like VirtualBox or 
VMWare. 

The exact appearance and 
behavior of the AVD depends on 
how you’ve set up the AVD in the 
first place. The AVD here is set 
up to mimic a Nexus 5X, so it will 
look and behave just like a Nexus 
5X on your computer. 

Let’s set up an AVD so that you 
can see your app running in the 
emulator. 


Android Emulator - Nexus_5X_API_25:5554 


*a Q 10:52 

March 13 


Maps 


O 


0y\Ic you vc set up an 
you II be able to 
see youv app running 
on it- Android Studio 
launches the emulator 
-for you- 


you are here ► 
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create avd 


Create an Android Virtual Pevice 

There are a few steps you need to go through in order to set up an AVD 
within Android Studio. We’ll set up a Nexus 5X AVD running API level 
25 so that you can see how your app looks and behaves running on this 
type of device. The steps are pretty much identical no matter what type 
of virtual device you want to set up. 



Set up environment 
Build app 
Run app 
Change app 



Open the Android Virtual Pevice Manager 

The AVD Manager allows you to set up new AVDs, and 
view and edit ones you’ve already created. Open it by 
selecting Android on the Tools menu and choosing AVD 
Manager. 

If you have no AVDs set up already, you’ll be presented 
with a screen prompting you to create one. Click on the 
“Create Virtual Device” button. 


Clitk oy\ "this button 

t© Create an AVD- 


Select the 
hardware 

On the next screen, 
you’ll be prompted 
to choose a device 
definition. This is 
the type of device 
your AVD will 
emulate. You can 
choose a variety of 
phone, tablet, wear, 
or TV devices. 

We’re going to see 
what our app looks 
like running on a 
Nexus 5X phone. 
Choose Phone from 
the Category menu 
and Nexus 5X from 
the list. Then click 
the Next button. 
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Virtual Device Configuration 

7 

Q 

Select Hardware 

Android Studio 


1 


Choose a device definition 

( 5 


© 


Category 

Name ▼ 

Size 

Resolution 

Density 


TV 

Pixel XL 

5.5" 

1440x2560 

560dpi 



Wear 

Pixel 

5.0" 

1080x1920 

xxhdpi 



I Phone 

Nexus S 

4.0" 

480x800 

hdpi 



Tablet 

Nexus One 

3.7" 

480x800 

hdpi 




Nexus 6P 

s.r 

1440x2560 

560dpi 



Nexus 6 

5.96" 

1440x2560 

560dpi 



HI Nexus 5X 

5.2" 

1080x1920 

420dpi 




Nexus 5 

4.95" 

1080x1920 

xxhdpi 



Nexus 4 

4.7" 

768x1280 

xhdpi 


New Hardware Profile 

Import Hardware Profiles 

r 




H=~l Nexus 5X 


Size: large 

Ratio: long 
Density: 420dpi \ 

W\\cy\ you 
select a 
device, its 
details 
appear 
here- 


Clone Devn 


Cancel | Previous ) 


































Creating an A VP (continued) 



getting started 

Set up environment 
Build app 
Run app 
Change app 


Select a system image 

Next, you need to select a system image. The system image gives you an 
installed version of the Android operating system. You can choose the 
version of Android you want to be on your AVD. 

You need to choose a system image for an API level that’s compatible with 
the app you’re building. As an example, if you want your app to work on 
a minimum of API level 19, choose a system image for at least API level 19. 
We want our AVD to run API level 25, so choose the system image with a 
release name of Nougat and a target of Android 7.1.1 (API level 25). Then 
click on the Next button. 



I 'f you don^t 
have this system 

image installed, 
you II be given 
the option to 
download it- 


We’ll continue setting up the AVD on the next page. 
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check configuration 


Creating an A VP (continued) 

Verify the A VP configuration 



Set up environment 
Build app 
Run app 
Change app 


On the next screen, you’ll be asked to verify the AVD configuration. This screen 
summarizes the options you chose over the last few screens, and gives you the 
option of changing them. Accept the options, and click on the Finish button. 



The AVD Manager will create the AVD for you, and when it’s done, display it in 
the AVD Manager list of devices. You may now close the AVD Manager. 


I e o o 


Android Virtual Device Manager 


Your Virtual Devices 


Android Studio 


Resolution 
1080 x 1920 : 


Type Name 
EH Nexus 5X API 25 

* 

Youv Ne*us 5)< AVD has beer, dvea-fced 


Target 

Android 7.1.1 <... 


CPU/ABI Size on Disk 
x85 650 MB 































Run the app in the emulator 

Now that you’ve set up your AVD, let’s run the app on it. To do 
this, choose the “Run ‘app’” command from the Run menu. When 
you’re asked to choose a device, select the Nexus 5X AVD you just 
created. Then click OK. 

The AVD can take a few minutes to appear, so while we wait, let’s 
take a look at what happens when you choose Run. 

Compile, package, deploy, and run 

The Run command doesn’t just run your app. It also handles all the 
preliminary tasks that are needed for the app to run: 


Libraries 


Resources 


getting started 




Emulator 


This is -the f\VV we jus*t dvea*ted- 


An APK file is an 
Android application 
package. It’s 
basically a JAR 
or ZIP file for 
Android applications. 


Emulator 


o 

o 

© 


The Java source files get compiled to 
bytecode. 

An Android application package, or APK 
file, gets created. 

The APK file includes the compiled Java files, 
along with any libraries and resources needed 
by your app. 

Assuming there's not one already 
running, the emulator gets launched 
and then runs the AVD. 


O 


Once the emulator has been launched 
and the AVD is active, the APK file is 
uploaded to the AVD and installed. 


^ The AVD starts the main activity 
associated with the app. 

Your app gets displayed on the AVD screen, 
and it’s all ready for you to test out. 
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be patient 


You can watch progress in the console 

It can sometimes take quite a while for the emulator to launch with your 
AVD—often several minutes. If you like, you can watch what’s happening^ 
using the Android Studio console. The console gives you a blow-by-blow 
account of what the build system is doing, and if it encounters any errors, 
you’ll see them highlighted in the text. 



Set up environment 
Build app 
Run app 
Change app 


We su 96«t Wing someth,^ e | se ^ do 
while waiting for the emulator to start 
Like guiltmg, or Cooking a small meal- 


You can find the console at the bottom of the Android Studio screen 
(click on the Run option at the bottom of the screen if it doesn’t appear 
automatically): 



Here’s the output from our console window when we ran our app: 


03/13 10:45:41: Launching app ^—Install the 

$ adb install-multiple -r /Users/dawng/AndroidStudioProjects/MyFirstApp/app/build/intermediates/ 
split-apk/debug/dep/dependencies.apk /Users/dawng/AndroidStudioProjects/MyFirstApp/app/build/ 
intermediates/split-apk/debug/slices/slice_l.apk /Users/dawng/AndroidStudioProjects/MyFirstApp/ 
app/build/intermediates/split-apk/debug/slices/slice_2.apk /Users/dawng/AndroidStudioProjects/ 
MyFirstApp/app/build/intermediates/split-apk/debug/slices/slice_0.apk /Users/dawng/ 
AndroidStudioProjects/MyFirstApp/app/build/intermediates/split-apk/debug/slices/slice_3.apk /Users/ 
dawng/AndroidStudioProjects/MyFirstApp/app/build/intermediates/split-apk/debug/slices/slice_6.apk / 
Users/dawng/AndroidStudioProj ects/MyFirstApp/app/build/intermediates/split-apk/debug/slices/slice_4. 
apk /Users/dawng/AndroidStudioProjects/MyFirstApp/app/build/intermediates/split-apk/debug/slices/ 
slice_5.apk /Users/dawng/AndroidStudioProjects/MyFirstApp/app/build/intermediates/split-apk/debug/ 
slices/slice_7.apk /Users/dawng/AndroidStudioProj ects/MyFirstApp/app/build/intermediates/split-apk/ 
debug/slices/slice_8.apk /Users/dawng/AndroidStudioProjects/MyFirstApp/app/build/intermediates/ 
split-apk/debug/slices/slice_9.apk /Users/dawng/AndroidStudioProj ects/MyFirstApp/app/build/outputs/ 
apk/app-debug.apk 

Split APKs installed 

$ adb shell am startservice com.hfad.myfirstapp/com.android.tools.fd.runtime.InstantRunService 

$ adb shell am start -n "com.hfad.myfirstapp/com.hfad.myfirstapp.MainActivity" -a android.intent. 
action.MAIN -c android.intent.category.LAUNCHER 

Connected to process 2685 on device Nexus 5X API 25 [emulator-5554] 

-_ 

Android studio has -finished 

28 Chapter 1 launching the Al/D we just set up. 



The emulator launches our app by starting the main activity 
for it- This is the activity the wizard Created for us. 


















Test drive 


V/ 

V 

“►EZ 


So let’s look at what actually happens onscreen when you run 
your app. 

First, the emulator fires up in a separate window. The 
emulator takes a while to load the AVD, but then you see 
what looks like an actual Android device. 


The emula-tor-—y 
launches... 


-I# 


Build app 
Run app 
Change app 


•and here’s -the M/V home 
screen. It looks and behaves 
just like a real Nexus 5)( device- 



Wait a bit longer, and you’ll see the app you 
just created. The application name appears 
at the top of the screen, and the default 
sample text “Hello World!” is displayed in 
the middle of the screen. 


fa&ro id Studio treated the 
sample text “Hello World! 
Without us tellit to- 


Here s the app 
^ " running on the 
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what happened 


What just happened? 

Let’s break down what happens when you run the app: 


v 

v 

-H3 


Set up environment 
Build app 
Run app 
Change app 


O 

© 

© 

© 


Android Studio launches the emulator, 
loads the AVD, and installs the app. 


When the app gets 
launched, an activity 
object is created from 
Main Activity .java. 

The activity specifies 
that it uses the layout 
activity_main. xml. 

The activity tells Android to 
display the layout on the screen. 

The text “Hello World!” gets displayed. 



instance, weVe us'rnj 
a vivb*al device- 


thever are no 

Dumb Questions 


o; You mentioned that when you create an APK file, the 
Java source code gets compiled into bytecode and added to 
the APK. Presumably you mean it gets compiled into Java 
bytecode, right? 

It does, but that’s not the end of the story. Things work a little 
differently on Android. 

The big difference with Android is that your code doesn’t actually 
run inside an ordinary Java VM. It runs on the Android runtime 
(ART) instead, and on older devices it runs in a predecessor to ART 
called Dalvik. This means that you write your Java source code and 
compile it into .class files using the Java compiler, and then the 
.class files get stitched into one or more files in DEX format, which is 
smaller, more efficient bytecode. ART then runs the DEX code. You 
can find more details about this in Appendix III. 


% That sounds complicated. Why not just use the normal 
Java VM? 


ART can convert the DEX bytecode into native code that can 
run directly on the CPU of the Android device. This makes the app 
run a lot faster, and use a lot less battery power. 



Is a Java virtual machine really that much overhead? 


Yes. Because on Android, each app runs inside its own 
process. If it used ordinary JVMs, it would need a lot more memory. 


Si- Do I need to create a new AVD every time I create a new 
app? 

No, once you've created the AVD you can use it for any of 
your apps. You may find it useful to create multiple AVDs in order to 
test your apps in different situations. As an example, in addition to 
a phone AVD you might want to create a tablet AVD so you can see 
how your app looks and behaves on larger devices. 
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Refine the app 

Over the past several pages, you’ve built a basic Android app 
and seen it running in the emulator. Next, we’re going to refine 
the app. 

At the moment, the app displays the sample text “Hello World!” 
that the wizard put in as a placeholder. You’re going to change 
that text to say something else instead. So what do we need to 
change in order to achieve that? To answer that, let’s take a 
step back and look at how the app is currently built. 


The app has one activity and one layout 

When we built the app, we told Android Studio how to 
configure it, and the wizard did the rest. The wizard created an 
activity for us, and also a default layout. 


V/ 

V 


getting started 

Set up environment 
Build app 
Run app 
Change app 


i 

*A Q 1:12 

My First App 



Your app currently says 
w tfello World!” but we re 
to Change it to 
somethin* else instead- 

Sup doge 


The activity controls what the app does 

Android Studio created an activity for us called 
MainActivity.java. The activity specifies what the app 
does and how it should respond to the user. 


The layout controls the app's appearance 

MainActivity.java specifies that it uses the layout Android 
Studio created for us called activity_main. xml. The layout 
specifies what the app looks like. 


We want to change the appearance of the app by changing the 
text that’s displayed. This means that we need to deal with the 
Android component that controls what the app looks like, so we 
need to take a closer look at the layout. 



Our activity 
specifies what the 
app docs and bow 
it should interact 
with the user- 


Our layout spcCi-Pics 
what the app looks 


like- 


activity_main.xml 
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the layout 


What's in the layout? 

We want to change the sample “Hello World!” 
text that Android Studio created for us, so let’s 
start with the layout file activity_main. xml. If it 
isn’t already open in an editor, open it now by 
finding the file in the app/src/main/res/layout ^ 
folder in the explorer and double-clicking on it. 


The design editor 

As you learned earlier, there are two ways of 
viewing and editing layout files in Android 
Studio: through the design editor and 
through the code editor. 

When you choose the design option, you 
can see that the sample text “Hello World!” 
appears in the layout as you might expect. 
But what’s in the underlying XML? 

Let’s see by switching to the code editor. 


The code editor 


When you choose the code editor 
option, the content of activity_main.xml 
is displayed. Let’s take a closer look 
at it. 


I*f you ea^-t 
see *ihe -folder 
s-trufriure in -the 
explorer, try 

sy/itehing to 

Project view. 


C" 1 MyFirstApp 







Clitk on 

this arrow 
to than^e 
how the 
-files and 
-folders are 
shown- 


The design editor 


a activity_m ai n .x m I x 


You can see -the design editov- 
by choosing "Design" here.- 



Palette 

<x *- i- 

All 

Ab TexlView 

Widgets 

o« Button 

Text 

E Toggle Button 

Layouts 

Q CheckBox 

Containers 

® RadioButton 

Images 

V CheckedText 1 

□ate 

= Spinner 

Transitions 

O ProgressBar 

Advanced 

™ ProgressBar( 

Google 

-• SeekBar 

Desion 

-» SeekBar (Disc 


7 


The tode - 
editor 


To see the Code editor, click 
on Text in ■the bottom tab. 


f?m\ uersion="l ,(T ?ricodIng="utf-3 " ?> 
ondroid.support,constraint.ConstraintLayout xmlns: android- 
xmlns: app="http: //schemas.and roid.com/apk/res-auto" 
xmlns: tools="http: //schemas, android, com/tools" 
and roid : layout_width="match_pa rent' 1 
and roid : layout_height="match_pa rent" 
tools : context="com, hfad.myfirstapp, MainActiwity"> 


<TextView 

android : layout_width="wrap_content" 
and roid : layout_height="wrap_content" 
and roid i text= M Hello World! " 
app : layout_const raintBottom_toBottoinDf ="pa rent" 
app :layout_const raintLeftjtoLeftOf ="pa rent" 
app :layout_const raintRight_toRightOf ="pa rent" 
a pp :la y ou t_c on s t rain t Top_t oTopOf =" pa ren t " /> 


</android,support.constraint,Constraintlayout> 
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activity_mam.xml has two elements 

Below is the code from activity_main.xml that Android Studio 
generated for us. We’ve left out some of the details you don’t 
need to think about just yet; we’ll cover them in more detail 
through the rest of the book. 

Here’s our code: 


This element 

determines 

hoy/ 

domponents 
should be 
displayed, in 
-this ease -the 
"Hello World!" 
■le*t 


<?xml version= M l.0” encoding= n utf-8"?> 

<android.support.constraint.ConstraintLayout 

> ^/\ndvoid Studio t^ave us move ^(/V|L- heve, but 
you don't need to -think about that yet- 

<TextView -^^—This is ihe <Text\/ie\M> element 

android:layout_width="wrap_content M 
android:layout_height="wrap_content" 
android:text="Hello World!" 

■ ^ We've le*ft out some o( the 

<Te*t\/iey/> )<ML too. 

</android.support.constraint.ConstraintLayout> 



getting started 

Set up environment 
Build app 
Run app 
Change app 


p_j/^"This is the -full path 

I 1 o( aetivity__n'3in.^ml 

MyFirstApp 

L a 

app/src/main 

res _ 

-a 

layout 


activity_main.xml 


As you can see, the code contains two elements. 

The first is an <android. support. constraint. 
ConstraintLayout> element. This is a type of layout 
element that tells Android how to display components on 
the device screen. There are various types of layout element 
available for you to use, and you’ll find out more about these 
later in the book. 

The most important element for now is the second element, 
the <TextView>. This element is used to display text to the 
user, in our case the sample text “Hello World!” 

The key part of the code within the <TextView> element 
is the line starting with android: text. This is a text 
property describing the text that should be displayed: 


o 


Don’t worry if your 
layout code looks 
different from ours. 

Android Studio 
may give you slightly different XML 
depending on which version you’re using. 
You don’t need to worry about this, 
because from the next chapter onward 
you’ll learn how to roll your own layout 
code, and replace a lot of what Android 
Studio gives you. 



The <Text\/iew> dement 
describes tbe le*t in 
tbe layout 


CTextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 


android:text="Hello World!" 


... /> 


A 

This is the text thats being displayed- 


Let’s change the text to something else. 


you are here ► 
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update text 


Update the text displayed in the layout 

The key part of the <TextView> element is this line: 

android:text="Hello World!" /> 



Set up environment 
Build app 
Run app 
Change app 


android: text means that this is the text property of 

the <TextView> element, so it specifies what text should be 

displayed in the layout. In this case, the text that’s being displayed 

is “Hello World!” .. «|fc|| 0 World'” 

Display -the text v 

^^android:text="Hello World!" /> 


To update the text that’s displayed in the layout, simply change 
the value of the text property from "Hello World ! " to 
" Sup doge ". The new code for the <TextView> should look 
like this: 


P 

We ve le-Pl out some 
ol the code, as all 
we \re domg -f or now 
is changing the -tex-t 
■that's displayed- 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android: text= , 5?ie^eOwd s i?l^ Sup doge" 
.../> 


Cha«5e the text here trom 
"Hello World'” to "Sup do^e”. 


Once you’ve updated the file, go to the File menu and choose the 
Save All option to save your change. 

there ictre no 

- Dumb Questions 


□ 

MyFirstApp 

413 

app/sre/main 

L a 



activity_main.xml 



My layout code looks different from yours. Is that OK? 


Yes, that’s fine. Android Studio may generate slightly different 
code if you’re using a different version than us, but that doesn’t 
really matter. From now on you’ll be learning how to create your 
own layout code, and you’ll replace a lot of what Android Studio 
gives you. 


Q.: Am I right in thinking we’re hardcoding the text that's 
displayed? 


Yes, purely so that you can see how to update text in 
the layout. There’s a better way of displaying text values than 
hardcoding them in your layouts, but you’ll have to wait for the next 
chapter to learn what it is. 


v,- The folders in my project explorer pane look different 
from yours. Why’s that? 

Android Studio lets you choose alternate views for how to 
display the folder hierarchy, and it defaults to the “Android” view. 
We prefer the “Project” view, as it reflects the underlying folder 
structure. You can change your explorer to the “Project” view by 
clicking on the arrow at the top of the explorer pane, and selecting 
the “Project” option. 



Click on 
•this arrow 
to charge 
-the e*fiover¬ 
view- 
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Take the app for a test drive 

Once you’ve edited the file, try running your app in the 
emulator again by choosing the “Run ‘app’” command from 
the Run menu. You should see that your app now says “Sup 
doge” instead of “Hello World!” 



getting started 

Set up environment 
Build app 
Run app 
Change app 



Here s -the 
updated version 
of our app. 


You’ve now built and updated your first Android app. 


you are here ► 
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CHAPTER 1 


toolbox 



Your Android Toolbox 

You’ve got Chapter 1 under 
your belt and now you’ve 
added Android basic concepts 
to your toolbox. 


You tan download 
the £ull tode -for 
the thaftev -fv-om 

htt^//■fcinyuvTtonn/ 
W 0 3 /tPiYsTA Y\ dv oi d • 



BULLET POINTS 


■ Versions of Android have a version 
number, API level, and code name. 


■ Android Studio is a special version of 
IntelliJ IDEA that interfaces with the 
Android Software Development Kit 
(SDK) and the Gradle build system. 


AndroidManifest.xml contains 
information about the app itself. It 
lives in the app/src/main folder. 

An AVD is an Android Virtual Device. 
It runs in the Android emulator and 
mimics a physical Android device. 


Atypical Android app is composed of 
activities, layouts, and resource files. 

Layouts describe what your app 
looks like. They’re held in the app/ 
src/main/res/layout folder. 

Activities describe what your app 
does, and how it interacts with the 
user. The activities you write are held 
in the app/src/main/java folder. 


An APK is an Android application 
package. It’s like a JAR file for 
Android apps, and contains your 
app’s bytecode, libraries, and 
resources. You install an app on a 
device by installing the APK. 

Android apps run in separate 
processes using the Android runtime 
(ART). 

The <Textview> element is used 
for displaying text. 
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2 building Interactive apps 

Apps That Do Something + 



Most apps need to respond to the user in some way. 

In this chapter, you’ll see how you can make your apps a bit more interactive. You’ll 
learn how to get your app to do something in response to the user, and how to get your 
activity and layout talking to each other like best buddies. Along the way, we’ll take you 
a bit deeper into how Android actually works by introducing you to R, the hidden gem 
that glues everything together. 


this is a new chapter 
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beer adviser 


Let's build a Peer Adviser app 

In Chapter 1, you saw how to create an app using the Android 
Studio New Project wizard, and how to change the text 
displayed in the layout. But when you create an Android app, 
you’re usually going to want the app to do something. 

In this chapter, we’re going to show you how to create an app 
that the user can interact with: a Beer Adviser app. In the app, 
users can select the types of beer they enjoy, click a button, and 
get back a list of tasty beers to try out. 

Here’s how the app will be structured: 

The layout specifies what the app will 
look like. 

It includes three GUI components: 

• A drop-down list of values called a spinner, 
which allows the user to choose which type of 
beer they want. 

• A button that when pressed will return a 
selection of beer types. 

• A text field that displays the types of beer. 

The file strings.xml includes any String 
resources needed by the layout—for 
example, the label of the button 
specified in the layout and the types of 
beer. 


© 


© 


o 


The activity specifies how the app 
should interact with the user. 

It takes the type of beer the user chooses, and 
uses this to display a list of beers the user might 
be interested in. It achieves this with the help of a 
custom Java class. 


© 


The custom Java class contains the 
application logic for the app. 

It includes a method that takes a type of beer as a 
parameter, and returns a list of beers of this type. 
The activity calls the method, passes it the type of 
beer, and uses the response. 


i 

4 A Q 2:15 

Beer Adviser 



light A 

Choose youv- 
beev t/pc> t\\t\c 

-the button- Find Beer! 


•••dnd "the —^ Jail Pale Ale 
apf tomes Gout Stout 

up wiih a 
lis-t o( beer 
suggestions. 




Activity 



Custom Java 
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building interactive apps 


Here's what we're going to do 

So let’s get to work. There are a few steps you need to go 
through to build the Beer Adviser app (we’ll tackle these 
throughout the rest of the chapter): 


o 


Create a project. 

You’re creating a brand-new app, so you’ll need to create a 

new project. Just like before, you’ll need to create an empty We II show Y ou 

activity with a layout. de*ta»ls o-f how “to do 

-this oy\ -the pa$e. 


o 


Update the layout. 

Once you have the app set up, you need to amend the layout so 
that it includes all the GUI components your app needs. 


i 

4 Si D 2:15 ■ 

0 Beer Adviser 



light j 

Find Beer! 

Jail Pale Ale 
Gout Stout 



o 


Connect the layout to the activity. 

The layout only creates the visuals. To add smarts to your 
app, you need to connect the layout to the Java code in your 
activity. 


o 


Write the application logic. 

You’ll add a Java custom class to the app, and use it to make 
sure users get the right beer based on their selection. 




Layout 


you are here ► 
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create project 


Create the project 

Let’s begin by creating the new app (the steps are similar to 
those we used in the previous chapter): 


Create project 
Update layout 
Connect activity 
Write logic 


O 

o 

o 

o 


Open Android Studio and choose “Start a new Android Studio project” from 
the welcome screen. This starts the wizard you saw in Chapter 1. 


When prompted, enter an application name of “Beer Adviser” and a 
company domain of “hfad.com”, making your package name com. hf ad. 
beeradviser. Make sure you uncheck the option to include C++ support. 



We want the app to work on most phones and tablets, so choose a minimum 
SDK of API 19, and make sure the option for “Phone and Tablet” is selected. 
This means that any phone or tablet that runs the app must have API 19 
installed on it as a minimum. Most Android devices meet this criterion. 


I*f your version ot 
Android Studio 
has an option to 
indude Isotlin 
support un£he£k 
this option too. 


Choose an empty activity for your default activity. Call the activity 
“FindBeerActivity” and the accompanying layout “activity_fmd_beer”. 
Make sure the option to generate the layout is selected and you uncheck the 
Backwards Compatibility (AppCompat) option. 



com. hfad. beeradviser 
Indude C++ support 



1 The wizard will take you through -these steps, 
^ just like betore Call your application "Beer 
^ Adviser," make sure it uses a minimum £P< oh 
API \% and then tell it to create an empty 
activity called TmdBeerActivity" and a layout 

tailed "activity_find__beer"- 

<r 



Make sure you 
UNCHECK the 
Backwards 
-Compatibility 
(AppCompat) 
>pti< 
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building interactive apps 


We've created a default activity and layout 


When you click on the Finish button, Android Studio creates a 
new project containing an activity called FindBeerActivity.java and a 
layout called activity_Jind_ beer xml. 

Let’s start by changing the layout file. To do this, switch to the 
Project view of Android Studio’s explorer, go to the app/src/main/ 
res/layout folder, and open the file activity_Jind_ beer xml. Then switch 
to the text version of the code to open the code editor, and replace 
the code in activity_find_beerxml with the following (we’ve bolded all 
the new code): 



Click oy\ the Text 
■tab -to open -the 
Code editor. 


<?xml version="1.0" encoding="utf- 

<LinearLayout 


3 " ?> 




WeVe replacihg the Code Android 
Studio gererated -for us. 


xmlns:android="http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 

android: layout_width="match_j?arent"^ \ These elements relate to the layout as a whole- They 
android: layout_height="match_j?arent" 11 1 

android:padding="16dp" 
android:orientation="vertical" 


determine the layout width and height, any padding 
in the layout margins, and whether Components 
should be laid out vertically or horizontally. 


tools:context="com.hfad.beeradviser.FindBeerActivity"> 

<TextView — This is used to display text- 
android: id="@+id/textView" 
android:layout_width="wrap_content" 


□ 

BeerAdviser 

HH 

app/src/main 

L o 


android: layout_height="wrap_content" 
android:text="This is a text view" /> 
</LinearLayout> 


We’ve just changed the code Android Studio gave us so that 
it uses a <LinearLayout>. This is used to display GUI 
components next to each other, either vertically or horizontally. 
If it’s vertically, they’re displayed in a single column, and if it’s 
horizontally, they’re displayed in a single row. You’ll find out 
more about how this works as we go through the chapter. 

Any changes you make to a layout’s XML are reflected in 
Android Studio’s design editor, which you can see by clicking on 
the Design tab. We’ll look at this in more detail on the next page. 



activity_ 

find_beer.xml 


Click oh the 
Design tab to opeh 
the desigh editor. 



you are here ► 
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design editor 


A closer look at the design editor 

The design editor presents you with a more visual way of editing 
your layout code than editing XML. It features two different 
views of the layouts design. One shows you how the layout will 
look on an actual device, and the other shows you a blueprint of 
its structure: 


v 


Create project 
Update layout 
Connect activity 
Write logic 



If lAndvoict Stud io doesn't show 
you both views o-P the layout, dick 
ot\ the 'Show Design + Blueprint” 
i£on in the design editor s toolbar. 


This view ot the 
design gives you an 
idea ox how your 
layout will look on 
an actual device. 



This is the 
blueprint 
view, which 
-foCuses more 
on the layout's 
structure- 


To the left of the design editor, there’s a palette that 
contains components you can drag to your layout. 
We’ll use this next. 


This list shows you the different 

categories of Component you tan _-3^ 

add to your layout- /ou can click 
or then, to -filter the Components 
displayed in the palette- 


you can increase the size of the 
palette by disking on this area 
and dragging it downward 



These 
are the 
Components 
You'll -find 
out more 
about them 
later in the 
book. 
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building interactive apps 


Add a button using the design editor 

We’re going to add a button to our layout using the design editor. Find the 
Button component in the palette, click on it, and then drag it into the 
design editor so that it’s positioned above the text view. The button appears 
in the layout’s design: 


V/ 


Create project 
Update layout 
Connect activity 
Write logic 


tteres -the 

B u-bfcoh 

dorwfohehi. 
Drag it into 
the design 
editor. 



Changes in the design editor are reflected in the XMl 

Dragging GUI components to the layout like this is a convenient way of 
updating the layout. If you switch to the code editor, you’ll see that adding 
the button via the design editor has added some lines of code to the file: 


There's a new <Button> 
element that desdribes 
the new button you've 
draped to the layout- 
We'll look at this ih 
more detail over the 
ne*t tew pa^es. 



<Button 

android:id="@+id/button" 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content 
android:text="Button" /> 


The dode “the design ed'rtor adds defends oh 

__where you f lade *the button so doh i worry i-C 

^ your dode looks di-f-fereni -from ours. 


a 


BeerAdviser 


HU 


<TextView 

android:id="@+id/textView" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="This is a text view" /> 


app/sre/main 

HU 


activity_find_beer.xml 



you are here ► 
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gui components are views 


activity_fmd_beer.xwl has a new button 

The editor added a new <Button> element to activity_Jind_ beer xml: 
<Button 

android:id="@+id/button n 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:text="Button" /> 


A button in Androidville is a pushbutton that the user can press to trigger 
an action. The <Button> element includes properties controlling its 
size and appearance. These properties aren’t unique to buttons—other 
GUI components including text views have them too. 


buttons and text views are subclasses of the same Android View class 


There’s a very good reason why buttons and text views have 
properties in common—they both inherit from the same Android 
View class. You’ll find out more about this later in the book, but for 
now, here are some of the more common properties. 

android.id 

This gives the component an identifying name. The id property 
enables you to control what components do via activity code: 

android:id="@+id/button n 

android:layout_width, android:layout_height 

These properties specify the width and height of the component. 
M wrap_content" means it should be just big enough for the 
content, and M match_parent" means it should be as wide as the 
layout containing it: 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 


awdroid.’text 

This tells Android what text the component should display. In the 
case of <Button>, it’s the text that appears on the button: 

android:text="Button M 


The \/iew dass mdudes lots ot 
di£Cev-er\t methods. 1/Vell look 
at this later in the book. 


V 
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A closer look at the layout code 

Let’s take a closer look at the layout code, and break it down so that 
you can see what it’s actually doing (don’t worry if your code looks a 
little different, just follow along with us): 



building interactive apps 

Create project 
Update layout 
Connect activity 
Write logic 


The 

<Lihea\rLayout> 

eler*eirfc 


<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 

xmlns:tools="http://schemas.android.com/tools" 

android:layout_width="match_j?arent" 

android:layout_height="match_j?arent" 

android:padding="16dp" 

android:orientation="vertical" 

tools:context="com.hfad.beeradviser.FindBeerActivity"> 


This is *the 
button. 


This is -the 
text view. 


<Button 

android:id="@+id/button" 
android:layout_width="match_jparent" 
android:layout_height="wrap_content" 
android:text="Button" /> 

<TextView 

android:id="@+id/textView" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="This is a text view" /> 


□ 

BeerAdviser 

4B 

app/sre/main 

ma 

res _ 

MB 

layout 


l</ 

activity_find_beer.xml 


</Lin.arLayout> Thi. £ | ras ft. 


The linearlayout element 


The first element in the layout code is <LinearLayout>. The 
<LinearLayout> element tells Android that the different GUI 
components in the layout should be displayed next to each other in a 
single row or column. 

You specify the orientation using the android: orientation 
attribute. In this example we’re using: 


There are other ways ot laying 
out your <$U| Components too- 
You'll -findi out more about 
these later in the book- 


android:orientation="vertical" 


so the GUI components are displayed in a single vertical column. 


you are here ► 
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look close 


A closer look at the layout code (continued) 

The <LinearLayout> contains two elements: a <Button> and 
a <TextView>. 



Create project 
Update layout 
Connect activity 
Write logic 


The button element 

The first element is the <Button>: 

<Button 

android:id="0+id/button" 
android:layout_width="match_parent" 
android:layout_height="wrap_content M 
android:text="Button" /> 


Using a linear layout 
means that GUI 
components are 
displayed in a single 


row or 


coin 


mn. 


As this is the first element inside the <LinearLayout>, it appears 
first in the layout at the top of the screen. It has a layout_width 
of "match_parent", which means that it should be as wide as 
its parent element, the <LinearLayout>. Its layout_height 
has been set to"wrap_content f? , which means it should be tall 
enough to display its text. 

The TextView element 

The final element inside the <LinearLayout>is the 
<TextView>: 


<TextView 

android:id="@+id/textView" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content M 
android:text="This is a text view" /> 


As this is the second element and we’ve set the linear layout’s 
orientation to "vertical", it’s displayed underneath the button 
(the first element). Its layout_width and layout_height are 
set to "wrap_content M so that it takes up just enough space to 
contain its text. 


The button is displayed a*t 
-the "top as its -the Tiv-st 
element in the )<MU 


■] 

*a Q 12:22 | 

Q Beer Adviser 


1 

V 

Button 


This is a text view 

A 



The text view is displayed 
underneath the button as it 
domes a-fter it in the XML. 
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building interactive apps 


Changes to the XML... 

You’ve seen how adding components to the design editor adds them 
to the layout XML. The opposite applies too—any changes you make 
to the layout XML are applied to the design. 

Try this now. Update your activity_Jind_beerxml code with the 
following changes (highlighted in bold): 


f\ spinner is the 
/Wroid name -for 
d drop-down list 
o£ values. It allows 
you to dhoose a 
single value -from a 
selection- 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="16dp" 
android: orientation="vertical" app/sr c/main_ 


Center the 
te*t view and * 
apply a margin. 


□ 

Ivisc 

HTJ 


BeerAdviser 


tools:context="com.hfad.beeradviser.FindBeerActivity"> 


<Spinner 

android:id="@+id/color" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginTop="40dp" 
android:layout_gravity="center" 
android:layout_margin="16dp" /> 




This element 
displays a 
spinner in the 
layout- 


Co _ 

MU 

layout 


activity_ 

find_beer.xml 


Center the button 
horizontally and — 
give it a margin. 


<Button 

android 
android 
android 

android 
android 

android 

<TextView 

android 
android 
android 

^ f android 
android 

android 

</LinearLayout> 


Change the button s IP to 

s* ^-find beer' • We II use this later. 

id=" @+id/*b^rtrfe«ri>^f ind_beer" ^— — 

layout_width="fftaJ^h>£a^T^ wrap_content" 

layout_height="wrap_content" 

layout_gravi ty= " center " Change the button's 

layout_margin="16dp" width so rts as wide 

text="Button" /> as its Content- 


Change the te%t view's IP to “brands". 

id=" 0+id/^erxfc ^ - igW " brands" 

layout_width="wrap_content" 

layout_height="wrap_content" 

layout_gravity="center" 
layout_margin="16dp" 

text="This is a text view" /> 




r 




h® this! 


Update the contents of 
activity_find_beer.xmi 
with the changes 
shown here. 


you are here ► 
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design editor 


...are reflected in the design editor 

Once you’ve changed the layout XML, switch to the design 
editor. Instead of a layout containing a button with a text view 
underneath it, you should now see a spinner, button, and text 
view centered in a single column. 

A spinner is the Android term for a drop-down list of values. 
When you press it, it expands to show you the list so that you 
can pick a single value. 


▼ |700 



Create project 
Update layout 
Connect activity 
Write logic 


A spinner provides 
a drop-down list of 
values. It allows you to 
ckoose a single value 
from a set of values. 

GUI components suck 
as buttons, spinners, 
and text views kave 
very similar attributes, 
as tkey are all types 
of View. Bekind tke 
scenes, tkey all inkerit 
from tke same Android 
View class. 



We’ve shown you how to add GUI components to the layout with the 
aid of the design editor, and also by adding them through XML. In 
general, you’re more likely to hack the XML for simple layouts to get 
the results you want without using the design editor. This is because 
editing the XML directly gives you more direct control over the 
layout. 
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Let's take the app for a test drive 


We still have more work to do on the app, but let’s see how 
it’s looking so far. Save the changes you’ve made by choosing 
File—>Save All, then choose the “Run ‘app’” command from 
the Run menu. When prompted, select the option to launch 
the emulator. 


Wait patiently for the app to load, and eventually it should 
appear. 



Try pressing the spinner. It’s not immediately obvious, but 
when you press it, the spinner presents you with a drop-down 
list of values—it’s just at this point we haven’t added any 
values to it. 


Here's what we've done so far 


Here’s a quick recap of what we’ve done so far: 


o 


We've created a layout that specifies 
what the app looks like. 

It includes a spinner, a button, and a text view. 


0 


The activity specifies how the app 
should interact with the user. 

Android Studio has created an activity for us, but 
we haven’t done anything with it yet. 


building interactive apps 

Create project 
Update layout 
Connect activity 
Write logic 





Activity 


The next thing we’ll do is look at replacing the hardcoded 
String values for the text view and button text. 


titer©] are no 

— Dumb Questions - 

Q.: My layout looks slightly different in the 
AVD compared with how it looks in the design 
editor. Why’s that? 

The design editor does its best to show you 
how the layout will look on a device, but it’s not 
always accurate depending on what version of 
Android Studio you’re using. How the layout looks 
in the AVD reflects how the layout will look on a 
physical device. 


you are here ► 
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dealing with strings 


V 


Hardcoding text wakes localization hard 

So far, we’ve hardcoded the text we want to appear in our text views 

and buttons using the android: text property: H 

Display -the text...v 

^^android:text="Hello World!” /> 


Create project 
Update layout 
Connect activity 
Write logic 


While this is fine when you’re just learning, hardcoding text isn’t the 
best approach. 

Suppose you’ve created an app that’s a big hit on your local Google 
Play Store. You don’t want to limit yourself to just one country or 
language—you want to make it available internationally and for 
different languages. But if you’ve hardcoded all of the text in your 
layout files, sending your app international will be difficult. 

It also makes it much harder to make global changes to the text. 
Imagine your boss asks you to change the wording in the app 
because the company’s changed its name. If you’ve hardcoded all 
of the text, this means that you need to edit a whole host of files in 
order to change the text. 

Put the text in a String resource file 

A better approach is to put your text values into a String resource file 
called strings.xml. 

Having a String resource file makes it much easier to internationalize 
your app. Rather than having to change hardcoded text values in a 
whole host of different activity and layout files, you can simply replace 
the strings.xml file with an internationalized version. 

This approach also makes it much easier to make global changes to 
text across your whole application as you only need to edit one file. If 
you need to make changes to the text in your app, you only need to 
edit strings.xml. 

How do you use String resources? 

In order to use a String resource in your layout, there are two things 
you need to do: 


Put String values 
in strings.xml 
rather than 
hardcoding them. 
strings.xml is a 
resource file used 
to hold name/value 
pairs of Strings. 
Layouts and 
activities can look 
up String values 
using their names. 


o 

© 


Create the String resource by adding it to strings.xml. 
Use the String resource in your layout. 


Let’s see how this is done. 
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Create the String resource 

We’re going to create two String resources, one for the text that 
appears on the button, and another for the default text that appears 
in the text view. 


v 


Create project 
Update layout 
Connect activity 
Write logic 


To do this, use Android Studio’s explorer to find the file strings, 
xml in the app/src/main/res/values folder. Then open it by double¬ 
clicking on it. 

The file should look something like this: 

<resources> 


□ 

BeerAdviser 

4T3 

app/src/main 


<string name="app_name">Beer Adviser</string> 
</resources> 

strings.xml contains one string resource named "app_name", which 
has a value of Beer Adviser. Android Studio created this String 
resource for us automatically when we created the project. 



values 



strings.xml 


This indidales -that -this is a £lrin$ resource. 



<string 


name= TT app_name TT >Beer Adviser^/string> 


This Siring resource has a name of u app_name”, 
and a value w Beer Adviser”. 


We’re first going to add a new resource called "f ind_beer " that 
has a value of Find Beer! To do this, edit strings.xml so that you 
add it as a new line like this: 


<resources> 

<string name="app_name">Beer Adviser</string> 

<string name="find_beer">Find Beer!</string> ^-'This adds a new 

</resources> vexurU talled " 


Siring 

-Cind_beer”. 


Then add a new resource named "brands" with a value of No 
beers selected: 


<resources> 

<string 

<string 

<string 

</resources> 


name="app_name">Beer Adviser</string> 
name="find_beer">Find Beer!</string> 

name="brands">No beers selected</string> 


This will be -the de-Pauli 
ie*i in ihe lexl view. 


Once you’ve updated the file, go to the File menu and choose the 
Save All option to save your changes. Next, we’ll use the String 
resources in our layout. 
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use strings 


Use the String resource in your layout 

You use String resources in your layout using code like this: 

android:text="@string/find_beer" /> 



Create project 
Update layout 
Connect activity 
Write logic 


You’ve seen the android: text part of the code before; it 
specifies what text should be displayed. But what does 
"Qstring/find_beer" mean? 

Let’s start with the first part, @ string. This is just a way of 
telling Android to look up a text value from a String resource file. 

In our case, this is the file strings.xml that you just edited. 

The second part, f ind_beer, tells Android to look up the 
value of a resource with the name f ind_beer. So 

"@string/find_beer" means “lookup the String resource 

with the name f ind_beer, and use the associated text value.” ^ S'br’mJ resource -find beer. 

Display -the ^ 

-^android:text="@string/find_beer" /> 


We want to change the button and text view elements in our 
layout XML so that they use the two String resources we’ve just 
added. 

Go back to the layout file activity_find_beer.xml file, and make the 
following code changes: 


o 


Change the line: 

android:text="Button" 


to: 



Android 
Studio 

, sometimes 

Watch it! displays the 
values of 

references in the code 
editor in place of actual 
code. 


android:text="@string/find_beer" 
Change the line: 

android:text="TextView" 
to: 

android:text="@string/brands" 


You can see the code on the next page. 


/As an example, it may display 
the text "Find Beer! " 
instead of the real code 
"@string/find_beer". Any 
such substitutions should be 
highlighted in the code editor. 
If you click on them, or hover 
over them with your mouse, 
the true code will be revealed. 


0<TextViow 

a nd roid :text=" Hello wo rid l " 


and roid : tesct= M @st ring/hello worid" 


snaroin : isy cmj i neisjnr = wrap contBn 

/> 
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building interactive apps 


The code for activity_find_beer.xml 


Here’s the updated code for activity_Jind_beerxml (changes are in 
bold); update your version of the file to match ours. 


<Spinner 

android:id="@+id/color" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginTop="4 Odp" 
android:layout_gravity="center" 
android:layout_margin="16dp" /> 


□ 

BeerAdviser 

4H 


- I/Ve did^t need to 
change the spirmev-. 
I/Ve II look at how you 
add values to it over 
the next -Pew pages. 


app/sre/main 

43 


co _ 

layout 


activity_find_beer.xml 


<Button 

android:id="@+id/find_beer" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:layout_margin="16dp" 
android: text="B^fe^-@string/find_beer" 

^ 'T 

Delete the harddoded text- 


— This will display the value 
o-f the tmd_beev Stvinj 




<TextView 

android:id="@+id/brands" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:layout_margin="16dp" 

android: text=" string/brands" 


</LinearLayout> 


'X 

Delete this hardcoded text too. 


This Will display the value 
/> o*P the brands String 

resource in the text view. 


When you’re done, save your changes. 

We’ve put a summary of adding and using String resources on 
the next page. 
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up close 


String peSource files Tip CjsSe - 

strings.xml is the default resource file used to hold name/value pairs 
of Strings so that they can be referenced throughout your app. It has 
the following format: 

The <iresour£es> 

element ^<resources> 

<string name="app_name">Beer Adviser</string> 
<string name="find_beer">Find Beer!</string> 
<string name="brands">No beer selected</string> 
</resources> 


identities -the 
stents o*P 
^e -Pile as 
resources. 


/ 


The <stvin<y> element 
identities -the name/value 
pairs as String- 



There are two things that allow Android to recognize strings.xml as 
being a String resource file: 

The file is held in the folder app/src/main/res/values. 

XML files held in this folder contain simple values, such as Strings and 
colors. 

The file has a <resources> element, which contains one or 
more <string> elements. 

The format of the file itself indicates that it’s a resource file containing 
Strings. The <resources> element tells Android that the file contains 
resources, and the <string> element identifies each String resource. 

This means that you don’t need to call your String resource file 
strings.xml ; if you want, you can call it something else, or split your 
Strings into multiple files. 

Each name/value pair takes the form: 

<string name="string_name">string_value</string> 


© 

© 


where string_name is the identifier of the String, and 
string_value is the String value itself. 


A layout can retrieve the value of the String using: 


"@ s tring/s tring_name" 

r 7 

string “tells /Wv-oid “to look -rov a 
String resource o-f “this name. 


^-This is “the name ot “the 

String whose value we 
want to return. 
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Time for a test drive 


building interactive apps 


Let’s see how the app’s looking now. Save the changes you’ve 
made, then choose the “Run c app’” command from the 
Run menu. When prompted, select the option to launch the 
emulator. 

This time when we run the app, the text for the button and 
the text view has changed to the String values we added to 
strings.xml. The button says “Find Beer!” and the text view says 
“No beers selected.” 

Here's what we've done so far 

Here’s a quick recap of where we’ve got to: 


i 

^ Q 12:36 ■ 

0 Beer Adviser 



Find Beer! 


► No beers selected 


The on *the button and *tbe 
'tex.'t view has been changed- 


© 


Q; Do I absolutely have to put my text 
values in a String resource file such as 
strings.xml ? 

It’s not mandatory, but Android gives 
you warning messages if you hardcode text 
values. Using a String resource file might 
seem like a lot of effort at first, but it makes 
things like localization much easier. It’s also 
easier to use String resources to start off 
with, rather than patching them in afterward. 


therej are no 

- Dumb Questions ■ 

Q: How does separating out the 
String values help with localization? 

Suppose you want your application to 
be in English by default, but in French if the 
device language is set to French. Rather 
than hardcode different languages into your 
app, you can have one String resource file 
for English text, and another resource file 
for French text. 


Weve created a layout that specifies what the app 
looks like. 

It includes a spinner, a button, and a text view. 

The file strings.xml includes the String resources we 
need. 

We’ve added a label for the button, and default text for the list of 
suggested beer brands to try. 

The activity specifies how the app should interact with 
the user. 

Android Studio has created an activity for us, but we haven’t done 
anything with it yet. 


Next we’ll look at how you add a list of beers to the spinner. 



Activity 


% How does the app know which 
String resource file to use? 

Put your default English Strings 
resource file in the app/src/main/res/ 
values folder as normal, and your French 
resource file in a new folder called app/src/ 
main/res/values-fr. If the device is set to 
French, it will use the Strings in the app/ 
src/main/res/values-fr folder. If the device 
is set to any other language, it will use the 
Strings in app/src/main/res/values. 
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array resources 


Add values to the spinner 

At the moment, the layout includes a spinner, but it doesn’t have 
anything in it. Whenever you use a spinner, you need to get it to 
display a list of values so that the user can choose the value they want. 

We can give the spinner a list of values in pretty much the same 
way that we set the text on the button and the text view: by using a 
resource. So far, we’ve used strings.xml to specify individual String 
values. For the spinner, all we need to do is specify an array of String 
values, and get the spinner to reference it. 

Adding an array resource is similar to adding a String 

As you already know, you can add a String resource to strings.xml using: 

<string name="string_name">string_value</string> 

where string_name is the identifier of the String, and string_ 
value is the String value itself. 

To add an array of Strings, you use the following syntax: 

<string-array name="string_array_name"> -This is -the name *the av-vay- 

<item>string_valuel</item> 

<item>string_value2</item> \ Th« e are -the values in the array, 
<item>string_value3</item> J add as many as you need- 


Create project 
Update layout 
Connect activity 
Write logic 

Resources are 
noncode assets, such 
as images or Strings, 
used by your app. 



</string-array> 

where string_array_name is the name of the array, and 
string_valuel, string_value2, string_value3 are the 
individual String values that make up the array. 

Let’s add a string-array resource to our app that can be used by 
the spinner. 
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Add the string-array to strings.xwl 

To add the string-array, open up strings.xml, and add the 
array like this: 



building interactive apps 

Create project 
Update layout 
Connect activity 
Write logic 


□ 



<string name="brands">No beer selected </string> 

<string-array name="beer_colors"> 

< i tem>l i gh t< / i tem> 

< i t em>ambe r< / i t em> 

<i tem>brown</ i tem> 


BeerAdviser 


KT3 

app/src/main 

4a 


< i tem>dar k< / i t em> 
</string-array> 


</resources> 


Add -this strin$-array bo strin<js.*m|. 
It defines an array o? Strings tailed 

beer_dolors v/itb array items li^bt> 

amber, brown, and dark. 


MTJ 

values 


strings.xml 


fret the spinner to reference a string-array 


A layout can reference a string-array using similar syntax to how 
it would retrieve the value of a String. Rather than use: 


"@string/string_name" 


you use the syntax: 




Use $s*tvin5 bo re*ferende a String and 
@array bo re-ferende an array. 


"@array/array_name" 


where array_name is the name of the array. 


Let’s use this in the layout. Go to the layout file activity_find_beer.xml 
and add an entries attribute to the spinner like this: 


□ 

BeerAdviser 

K3 


<Spinner 

android:id="@+id/color" 

android:layout_width="wrap_content" 

android:layout_height="wrap_content" 

android:layout_marginTop="4 Odp" 

android:layout_gravity="center" 

android:layout_margin="16dp" 

android:entries="@array/beer_colors" /> 


app/src/main 

nn 


CO 

layout 


activity_find_beer.xml 




Those are all the changes you need in order to get the spinner to 
display a list of values. Let’s see what it looks like. 


This means “tbe entries -for tbe 
spinner dome -from array beer_dolors . 
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test drive 

Test drive the spinner 

So let’s see what impact these changes have had on our app. Save 
your changes, then run the app. You should get something like this: 



Create project 
Update layout 
Connect activity 
Write logic 


i 

Q 12:41 P 

Beer Adviser 

1 


By de-fault 


- / "nJ 

•the top ite*. Ii9ht ^ 

lh the spiirtnev- 

15 se * e£ ted. Find Beer! 


No beers selected 


A 


i 

□ 12:41 | 

Beer Adviser 



Cli^k on '— 
the spinnev* 
to see its 
entries. 


No 


light A 
light 
amber 
brown 

dark 


ed 


Where we've got to 

Here’s a reminder of what we’ve done so far: 


rv 


i 

*A □ 12:41 ■ 

Beer Adviser 



iVhen you dlidk-^V 
., amber 

on a value, it A 


jets selected. 


Find Beer! 


No beers selected 


© 


We've created a layout that specifies what 
the app looks like. 

It includes a spinner, a button, and a text view. 


Q The file strings.xml includes the String 
resources we need. 

We’ve added a label for the button, default text for the 
suggested beer brands, and an array of values for the 
spinner. 


o 


The activity specifies how the app should 
interact with the user. 

Android Studio has created an activity for us, but we 
haven’t done anything with it yet. 



Activity 


So what’s next? 
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building interactive apps 


We need to make the button do something 

What we need to do next is make the app react to the value 
we select in the spinner when the Find Beer button is clicked. 

We want our app to behave something like this: 


y* Create project 
~ Update layout 

Connect activity 
Write logic 


The user chooses a type of beer 
from the spinner. 

Q The user clicks the Find Beer 

button, and the layout specifies 
which method to call in the 
activity. 

^ The method in the activity 

retrieves the value of the selected 
beer in the spinner and passes 
it to the getBrands() method 
in a Java custom class called 
BeerExpert. 


Q BeerExpert's getBrands() method 
finds matching brands for the type 
of beer and returns them to the 
activity as an ArrayList of Strings. 


© 


The activity gets a reference to 
the layout text view and sets its 
text value to the list of matching 
beers. 


After all those steps are completed, the list 
is displayed on the device. 



Let’s start by getting the button to call a method. 
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onClick attribute 


Make the button call a method 


Whenever you add a button to a layout, it’s likely you’ll want it to do 
something when the user clicks on it. To make this happen, you need 
to get the button to call a method in your activity. 

To get our button to call a method in the activity when it’s clicked, 
we need to make changes to two files: 


o 

o 


Change the layout file activity_find_beer. xml. 

We’ll specify which method in the activity will get called 
when the button is clicked. 

Change the activity file FindBeer Activity .java. 

We need to write the method that gets called. 



Create project 
Update layout 
Connect activity 
Write logic 


Let’s start with the layout. 


Use onClick to say which method the button calls 


It only takes one line of XML to tell Android which method a 
button should call when it’s clicked. All you need to do is add an 
android: onClick attribute to the <button> element, and tell 
it the name of the method you want to call: 

^_.This means W when “the domfonent is dlidked; tall ^ 

the method in the activity called method_name" 


android:onClick="method name” 


Let’s try this now. Go to the layout file activity_find_beer.xml^ and add a 
new line of XML to the <button> element to say that the method 
onClickFindBeer () should be called when the button is clicked: 


<Button 

android:id="@+id/find_beer" 
android:layout_width="wrap_content" 
android:layout_height= n wrap_content" 
android:layout_gravity="center" 
android:layout_margin=" 16 dp" 
android:text="@string/find_beer" 
android:onClick= M onClickFindBeer" /> 


□ 

BeerAdviser 

4ft 

app/src/main 

HB 


es _ 
MT3 


layout 





Once you’ve made these changes, save the file. 

Now that the layout knows which method to call in the activity, 
we need to write the method. Let’s take a look at the activity. 


When the button is 
disked, edit ■the method 
onClidkFindBeerO in -the 
activity. Well dreate -the 
method in -the adtivity over 
the next -Pew pages. 


activity_find_beer.xml 
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What activity code looks like 


When we first created a project for our app, we asked the wizard to create 
an empty activity called FindBeerActivity. The code for this activity 
is held in a file called FindBeer Activity.java. Open this file by going to the app/ 
src/main/java folder and double-clicking on it. 

When you open the file, you’ll see that Android Studio has generated 
some Java code for you. Rather than taking you through all the code that 
Android Studio may (or may not) have created, we want you to replace the 
code that’s currently in FindBeerActivityjava with the code shown here: 


package com.hfad.beeradviser; 


import 

import 


android.app.Activity; 
android.os.Bundle; 


Make suve dass extends 
• -the Andv-oid Activity class. 


V 


□ 

BeerAdviser 

4B 

app/sre/main 

MB 


java_ 

com.hfad.beeradviser 



FindBeerActivity.java 


public class FindBeerActivity extends Activity { 


@Override 

protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState) 


This is the onCveateO method- It s called 
when the activity is tirst Created- 


setContentView (R. layout. activity_f ind_beer) 


;*r" 


} 


seiCohieni\/iewO -tells {\n&ro id 
whieh layou-t ike activity uses. |* 
•this ease, its ae-tivi-ty__-ri^d__beer. 


The above code is all you need to create a basic activity. As you can see, it’s a 
class that extends the android. app . Activity class, and implements an 
onCreate () method. 

All activities (not just this one) have to extend the Activity class or one 
of its subclasses. The Activity class contains a bunch of methods that 
transform your Java class from a plain old Java class into a full-fledged, card- 
carrying Android activity. 

All activities also need to implement the onCreate () method. This 
method gets called when the activity object gets created, and it’s used to 
perform basic setup such as what layout the activity is associated with. This 
is done via the setContentView () method. In the example above, 
setContentView (R. layout. activity_f ind_beer) tells Android 
that this activity uses activity_f ind_beer as its layout. 

On the previous page, we added an onClick attribute to the button in our 
layout and gave it a value ofonClickFindBeer. We need to add this 
method to our activity so it will be called when the button gets clicked. This 
will enable the activity to respond when the user touches the button in the 
user interface. 



Replace the code 
in your version of 
FindBeer Activity.java 
with the code shown 
on this page. 
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on ClickFindBeerQ 


Add an onClickFindPeerO method 
to the activity 

The onClickFindBeer () method needs to have a particular 
signature, or otherwise it won’t get called when the button specified in 
the layout gets clicked. The method needs to take the following form: 



Create project 
Update layout 
Connect activity 
Write logic 


public void onClickFindBeer(View view) { 

C' . \ \ 

The method must be The method must have a The method must have a sihjle 

public void return value- parameter o( type V'\ ew. 


If the method doesn’t take this form, then it won’t respond when 
the user presses the button. This is because behind the scenes, 
Android looks for a public method with a void return value, with 
a method name that matches the method specified in the layout 
XML. 

The View parameter in the method may seem unusual at first 
glance, but there’s a good reason for it being there. The parameter 
refers to the GUI component that triggers the method (in this case, 
the button). As we mentioned earlier, GUI components such as 
buttons and text views are all types of View. 

So let’s update our activity code. Add the onClickFindBeer () 
method below to your activity code [FindBeerActivity.java): 

WeVe using this 

£lass, so we heed —a ■ . , . , TT . 

l ^ import android.view.View; 

to impo\rfc it- 


II you want a method 
to respond to a button 
click, it must he public, 
kave a void return 
type, and take a single 
View parameter. 


Add the 

Oh ClidkPmdB eevO 
r\ ethod to 


public class FindBeerActivity extends Activity { 


(//Called when the user clicks the button 


FihdBcerA^t'vity-java- — public void onClickFindBeer (View view) { 

h 


i 

<Layout> 

</Layout > 1 

activity_find_beer.xml 


onClickFindBeer () 




o 


□ 


BeerAdviser 


FindBeerActivity.java 


Hn 

app/sre/main 


java 


43 


com.hfad.beeradviser 

Lp 


FindBeerActivity.java 
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onClickFindPeerO needs to do something 

Now that we’ve created the onClickFindBeer () method in our 
activity, the next thing we need to do is get the method to do something 
when it runs. Specifically, we need to get our app to display a selection of 
different beers that match the beer type the user has selected. 

In order to achieve this, we first need to get a reference to both the spinner 
and text view GUI components in the layout. This will allow us to retrieve 
the value of the chosen beer type from the spinner, and display text in the 
text view. 


building interactive apps 



Create project 
Update layout 
Connect activity 
Write logic 


Use findView&yId() to get a reference to a view 


We can get references for our two GUI components using a method called 
f indViewByld () . This method takes the ID of the GUI component as 
a parameter, and returns a View object. You then cast the return value 
to the correct type of GUI component (for example, a Text View or a 
Button). 

Here’s how you’d use f indViewByld () to get a reference to the text 
view with an ID of brands: 


1/Vc want the view with 

an IP o-f Wands. 



TextView brands = (TextView) findViewByld(R.id.brands); 

^ f 

Wands is a TextView, so we 
have to east it as one- 


Take a closer look at how we specified the ID of the text view. Rather 
than pass in the name of the text view, we passed in an ID of the form 
R. id. brands. So what does this mean? What’s R? 

R.java is a special Java file that gets generated by Android Studio 
whenever you create or build your app. It lives within the app/build/ 
generated/'source/r/debug folder in your project in a package with the same 
name as the package of your app. Android uses R.java to keep track of 
the resources used within the app, and among other things it enables 
you to get references to GUI components from within your activity code. 

If you open up Rjava , you’ll see that it contains a series of inner classes, 
one for each type of resource. Each resource of that type is referenced 
within the inner class. As an example, R.java includes an inner class 
called id, and the inner class includes a static final brands 
value. Android added this code to R.java when we used the code 
"@ + id/brands" in our layout. The line of code: 

(TextView) findViewByld(R.id.brands); 
uses the value of brands to get a reference to the brands text view. 


R is a special Java class 
that enables you to 
retrieve relerences to 
resources in your app. 



f T$ax 


R.java gets 
generated 
for you. 


You never 
change any of the code within 
this file, but it’s useful to know 
it’s there. 
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view methods 


Once you have a view, you can access its 
methods 

The f indViewByld () method provides you with a Java version of your 
GUI component. This means that you can get and set properties in the 
GUI component using the methods exposed by the Java class. Let’s take a 
closer look. 

Setting the text in a text view 

As you’ve seen, you can get a reference to a text view in Java using: 

TextView brands = (TextView) findViewByld(R.id.brands); 

When this line of code gets called, it creates a TextView object called 
brands. You are then able to call methods on this TextView object. 

Let’s say you wanted to set the text displayed in the brands text view 
to “Gottle of geer”. The TextView class includes a method called 
set Text () that you can use to change the text property. You use it like 

this: .. . 

— Set the te*t on the brands 

brands.setText("Gottle of geer"); ^ Te*t\/ie*/ b> "pottle o-f geer". 

Retrieving the selected value in a spinner 

You can get a reference to a spinner in a similar way to how you get a 
reference to a text view. You use the findViewByld () method as 
before, but this time you cast the result as a spinner: 

Spinner color = (Spinner) findViewByld(R.id.color); 


V 

V 


Create project 
Update layout 
Connect activity 
Write logic 


This gives you a Spinner object whose methods you can now access. 
As an example, here’s how you retrieve the currently selected item in the 
spinner, and convert it to a String: 


String.valueOf(color.getSelectedltem()) 

The code: 


This gets the selected item in the 
spinney- and Converts it to a String. 


color.getSelectedltem() 


actually returns a generic Java object. This is because spinner values 
can be something other than Strings, such as images. In our case, we 
know the values are all Strings, so we can use String. valueOf () to 
convert the selected item from an Obj ect to a String. 


64 Chapter 2 



building interactive apps 


Update the activity code 

You now know enough to write some code in the onClickFindBeer () 
method. Rather than write all the code we need in one go, let’s start by 
reading the selected value from the spinner, and displaying it in the text view. 

Activity Magnets 

Somebody used fridge magnets to write a new onClickFindBeer () 
method for us to slot into our activity. Unfortunately, a freak kitchen whirlwind 
has dislodged the magnets. Can you piece the code back together again? 

The code needs to retrieve the type of beer selected in the spinner, and then 
display the type of beer in the text view. 

//Called when the button gets clicked 
public void onClickFindBeer( view) { 


//Get a reference to the TextView 

brands = ( ) ; 


//Get a reference to the Spinner 

Spinner = ( ) ; 


//Get the selected item in the Spinner 
String = String.valueOf(color. 


//Display the selected item 
brands. (beerType); 

} 



) ; 


.-1 I findViewByld j 

setText J 

R. id.color I 

TextView 

j color | 

R. v 

iew.brands 



(TextView) | 


Button 


findView 


] 



R. id.brands 


] 


View 


[ getSelectedItem() j 

1 i 

beerType 


(Spinner) j 


findViewById~j 


You 

need "to use 
all -the 
^agheis. 
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magnets solution 



C 


Activity Magnets Solution 

Somebody used fridge magnets to write a new 
onClickFindBeer () method for us to slot into our activity. 
Unfortunately, a freak kitchen whirlwind has dislodged the magnets. 
Can you piece the code back together again? 


The code needs to retrieve the type of beer selected in the spinner, 
and then display the type of beer in the text view. 


//Called when the button gets clicked 
public void onClickFindBeer( view I view) { 



//Get a reference to the TextView 
brands = | (TextView) 



findViewByld 


R.id.brands 


1 


Spinner 


1 color 

1 = ] 

(Spinner) 1 



findViewByld 


R.id.color | ) . 


//Get the selected item in the Spinner 

String beerType \ = String. valueOf (color . |~ getSelectedltemQ 



); 


//Display the selected item 
brands. | setText k(beerType); 


Button 


R.view.brands 





You didn't need * sc 
•these majne'ts- 
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The first version of the activity 

Our cunning plan is to build the activity in stages and test it as we go 
along. In the end, the activity will take the selected value from the 
spinner, call a method in a custom Java class, and then display matching 
types of beer. For this first version, our goal is just to make sure that we 
correctly retrieve the selected item from the spinner. 

Here is our activity code, including the method you pieced together on 
the previous page. Apply these changes to FindBeerActivity.java , then save 
them: 


building interactive apps 



Create project 
Update layout 
Connect activity 
Write logic 


package com.hfad.beeradviser; 

import android.app.Activity; 
import android.os.Bundle; 

import android, view. View; 
import android.widget.Spinner A 
import android.widget.TextView; 


□ 


BeerAdviser 


lA/eVe using these 
e*t*-a classes so we 
need -to imyovt -them- 


4T3 

app/src/main 

L a 

java 


public class FindBeerActivity extends Activity { 


com.hfad.beeradviser 

L @ 

FindBeerActivity.java 


@Override 

protected void onCreate (Bundle savedlnstanceState) { IVe^ve hot changed this method 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_find_beer); 

} 


//Called when the button gets clicked 
public void onClickFindBeer(View view) { 

//Get a reference to the TextView 

TextView brands = (TextView) findViewById(R. id.brands) ; -C’md\/iewBy|d returns 9 

//Get a reference to the Spinner ^ ^^ \/iew. You need to east it 

Spinner color = (Spinner) findViewByld (R. id. color) ; to the right type \/»ew. 

//Get the selected item in the Spinner 

String beerType = String.valueOf(color.getSelectedltern()); 

//Display the selected item 
brands.setText(beerType); 

} 

} 


A 

^ getSeleetedltem returns 
an Object- need to 
turn it into a String. 
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what happens 

What the code does 

Before we take the app for a test drive, let’s look at what the code 
actually does. 



Create project 
Update layout 
Connect activity 
Write logic 


O 


The user chooses a type of beer from the spinner and clicks on the Find Beer button. 
This calls the public void onClickFindBeer(View) method in the activity. 

The layout specifies which method in the activity should be called when the button is clicked via the 
button’s android: onClick property. 



Layout FindBeerAc+ivity 


o 


The activity gets references to the Spinner and TextView GUI components using calls 
to the findViewByldQ method. 



© 


The activity retrieves the currently selected value of the spinner (in this case amber), 
and converts it to a String. 



FindBeerActivity Spinner 


O 


The activity then sets the text property of the TextView to reflect the currently 
selected item in the spinner. 


"amber" 



FindBeerActivity TextView 
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building interactive apps 


Test drive the changes 

Make the changes to the activity file, save it, and then run 
your app. This time when we click on the Find Beer button, it 
displays the value of the selected item in the spinner. 


i 

^ Q 2:01 1 

0 Beer Adviser 



The -type of 
beev selected 
is displayed m 
•the te*t view 



amber 


Find Beer! 



amber 



there,are no 

Dumb Questions 


O: I added a String to my strings.xml file, but I can’t see it 
in R.java. Why isn’t it there? 


Android Studio, generates R.java when you save any 
changes you’ve made. If you’ve added a resource but can’t see it in 
R.java, check that your changes have been saved. 



What do you mean “in this case”—isn’t it always? 


You can do more complicated things with spinners than just 
display text. As an example, the spinner might display an icon next 
to each value. As getSelectedltem () returns an object, 
it gives you a bit more flexibility than just returning a String. 


R.java also gets updated when the app gets built. The app builds 
when you run the app, so running the app will also update R.java. 

The values in the spinner look like they’re static as 
they’re set to the values in the string-array. Can I 
change these values programmatically? 

You can, but that approach is more complicated than just 
using static values. We’ll show you later in the book how you can 
have complete control over the values displayed in components 
such as spinners. 


% What type of object is returned by 
getSelectedltem()? 


It’s declared as type Ob j ect. Because we used a 
string-array for the values, the actual value returned in 
this case is a String. 



Does the name of onClickFindBeer matter? 


All that matters is that the name of the method in the activity 
code matches the name used in the button’s onClick attribute 
in the layout. 


% Why did we have to replace the activity code that 
Android Studio created for us? 


IDEs such as Android Studio include functions and utilities 
that can save you a lot of time. They generate a lot of code for 
you, and sometimes this can be useful. But when you’re learning a 
new language or development area such as Android, we think it’s 
best to learn about the fundamentals of the language rather than 
what the IDE generates for you. This way you’ll develop a greater 
understanding of the language. 
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BeerExpert 


Build the custom Java class 


As we said at the beginning of the chapter, the Beer Adviser app 
decides which beers to recommend with the help of a custom 
Java class. This Java class is written in plain old Java, with no 
knowledge of the fact it’s being used by an Android app. 


Custom Java class spec 

The custom Java class should meet the following requirements: 


o 

o 

o 


The package name should be com. hf ad. beeradviser. 

The class should be called BeerExpert. 

It should expose one method, getBrands (), that takes a 
preferred beer color (as a String), and return a List<String> of 
recommended beers. 



<v-esowrdes> 


strings.xml 


Wc need *to dreate 
, fl , _„a Java dlass -that 

t\iit Fool I - 

fubi.e f x the adtivity da* 

use io -find ou*t 
wbidb beer brands 
*t° surest 


BeerExpert 


Puild and test the Java class 


Java classes can be extremely complicated and involve calls to complex 
application logic. You can either build and test your own version of the 
class, or use our sophisticated version of the class shown here: 

package com.hfad.beeradviser; 

import java.util.ArrayList; 
import java.util.List; 

public class BeerExpert { 

List<String> getBrands(String color) { 

List<String> brands = new ArrayListO(); 
if (color.equals("amber")) { 

brands.add("Jack Amber"); 
brands.add("Red Moose"); 

} else { 


This is pure Java dodej 
KotWmOj And'roidy about it- 

l£ 


□ 

BeerAdviser 

4 H 

app/sre/main 

1 m 

'An 

com.hfad.beeradviser 



BeerExpertjava 



brands.add("Jail Pale Ale"); 
brands.add("Gout Stout"); 

} 

return brands; 

} 

} 


Add the BeerExpert class to your 
project. Select the com.hfad.beeradviser 
package in the applsrclmainljava folder, 
go to File^New...^'Java Class, name the 
file “BeerExpert”, and make sure the 
package name is “com.hfad.beeradviser”. 
This creates the BeerExpert.java file. 


70 Chapter 2 





building interactive apps 


Enhance the activity to call the custom 
Java class so that we can get REAL advice H 

In version two of the activity we need to enhance the onClickFindBeer () method 
to call the BeerEXpert class for beer recommendations. The code changes needed 
are plain old Java. You can try to write the code and run the app on your own, or you 
can follow along with us. But before we show you the code changes, try the exercise 
below; it’ll help you create some of the activity code you’ll need. 


V 

v 


Create project 
Update layout 
Connect activity 
Write logic 



Enhance the activity so that it calls the BeerExpert 
getBrands () method and displays the results in the text view. 


package com.hfad.beeradviser; 


import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.Spinner; 
import android.widget.TextView; 

import java.util.List; ^ added ^ | me ^ you . 

public class FindBeerActivity extends Activity { 

private BeerExpert expert = new BeerExpert(); __ , , 

YII need to use the Bear£xpev~t 

//Called when the button gets clicked ^eer v-e£ornrnenda‘iions, 

public void onClickFindBeer (View view) { so ddded ‘this line -fov you Joo. 

//Get a reference to the TextView 

TextView brands = (TextView) findViewByld(R.id.brands); 

//Get a reference to the Spinner 

Spinner color = (Spinner) findViewByld(R.id.color); 

//Get the selected item in the Spinner 

String beerType = String.valueOf(color.getSelectedltem()); 

//Get recommendations from the BeerExpert class 


T 

/ou »eed to update -the o*CliekFmdBee*-0 method. 
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sharpen solution 



Enhance the activity so that it calls the BeerExpert 
getBrands () method and displays the results in the text view. 


package com.hfad.beeradviser; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.Spinner; 
import android.widget.TextView; 
import java.util.List; 

public class FindBeerActivity extends Activity { 

private BeerExpert expert = new BeerExpert(); 

//Called when the button gets clicked 
public void onClickFindBeer(View view) { 

//Get a reference to the TextView 

TextView brands = (TextView) findViewByld(R.id.brands); 
//Get a reference to the Spinner 

Spinner color = (Spinner) findViewByld(R.id.color); 

//Get the selected item in the Spinner 

String beerType = String.valueOf(color.getSelectedltem()); 
//Get recommendations from the BeerExpert class 


Lis*t<£*tring> brandsList — e^pertge-tBrands^beerType); a brands. 

£*trin<)Builder brandsFormatted =• new S*tringBuilderO; ^' Build a Siring using 

ihe values in ihe Lisi. 

-for (Siring brand •* brandsLisi) { 


} 


brandsFormaiiedappendfbrandXappend^Xn ); ^— Display tacM brand 

on a new line* 


//Display ibe beers 


brands.seiTe*i(brandsForrnaiied); ^ Vlcy/> 


Display ibe results in 


Usmft the Beer£*pert verves pure Java Code, so dont 
yjorry it your tode looks a little ditterent than ours. 
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Activity code version l 

Here’s our full version of the activity code. Apply the changes shown 
here to your version of FindBeerActivity.java , make sure you’ve added 
the Beer Expert class to your project, and then save your changes: 

package com.hfad.beeradviser; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.Spinner; 
import android.widget.TextView; 


v 

V 


building interactive apps 

Create project 
Update layout 
Connect activity 
Write logic 


□ 


BeerAdviser 


43 

app/src/main 

hh 


java 


m3 


import java. util. List ^ usiri g this e *tra class so we »eed io import it 


com.hfad.beeradviser 


L@ 

FindBeerActivity.java 


public class FindBeerActivity extends Activity { 

private BeerExpert expert = new BeerExpert(); 

A Add at] instance of Beev-Ex-yevt as a private variable- 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_find_beer); 

} 


//Called when the button gets clicked 
public void onClickFindBeer(View view) { 

//Get a reference to the TextView 

TextView brands = (TextView) findViewByld(R.id.brands); 
//Get a reference to the Spinner 

Spinner color = (Spinner) findViewByld(R.id.color); 

//Get the selected item in the Spinner 

String beerType = String.valueOf(color.getSelectedltem()); 

//Get recommendations from the BeerExpert class 


Use the BeerExpert elass 

List<String> brandsList = expert. getBrands (beerType) ; ^ ^ ^ ^ ^ 

StringBuilder brandsFormatted = new StringBuilder(); 

for (String brand : brandsList) { A Build a SW displays 

brandsFormatted.append(brand) - append (- \n') ; ^ ^ ^ ^ a | me . 

} 

//Display the beers 

brands. setText (brandsFormatted) ; p isp | ay fte in the Text\/iew. 

T 

Delete this line. 
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what happens 


What happens when you run the code 

Q When the user clicks on the Find Beer button, the 
onClickFindBeer() method in the activity gets called. 

The method creates a reference to the spinner and text view, and gets the 
currently selected value from the spinner. 



TextView 


o 


onClickFindBeer() calls the getBrands() method in the 
BeerExpert class, passing in the type of beer selected in the 
spinner. 

The getBrands () method returns a list of brands. 


onClickFindBeer() J 


getBrands ("amber") 


"Jack Amber" 
FindBeerAc+ivi+y "Red Moose" 



o 


i 

BeerExpert 


^ The onClickFindBeer() method formats the list of brands and 
uses it to set the text property in the text view. 


"Jack Amber 
Red Moose" 


onClickFindBeer() J 





FindBeerAc+ivi+y 


TextView 
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Test drive your app 

Once you’ve made the changes to your app, go ahead 
and run it. Try selecting different types of beer and 
clicking on the Find Beer button. 



building interactive apps 

Create project 
Update layout 
Connect activity 
Write logic 


i 

^ Q 2:15 

0 Beer Adviser 






light 


Find Beer! 


Jail Pale Ale 
Gout Stout 


i 

Q 2:15 | 

Beer Adviser 



v 

This is what you yt 
when you select lijht- 



amber 


Find Beer! 


Jack Amber 
Red Moose 




This is what you get 
when you select amber. 



When you choose different types of beer and 
click on the Find Beer button, the app uses the 
Beer Expert class to provide you with a selection 
of suitable beers. 
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toolbox 



Your Android Toolbox 


You’ve got Chapter 2 under 
your belt and now you’ve 
added building interactive 
Android apps to your toolbox. 


You ta* download 
-Pull Code &>v 
i\\t dhaptcv* Prom 
Yvbbp ■*/ Abrnyuv-Uo**/ 
rtcadF^stA^dv-o'ui. 


BULLET POINTS- 

■ The <Button> element is used to add a button. 

■ The <Spinner> element is used to add a spinner, 
which is a drop-down list of values. 

■ All GUI components are types of view. They inherit from 
the Android view class. 

■ strings.xml is a String resource file. It’s used to separate 
out text values from the layouts and activities, and 
supports localization. 

■ Add a String to strings.xml using: 

<string name="name">Value</string> 

■ Reference a String in the layout using: 

"@string/name" 

■ Add an array of String values to strings.xml using: 

<string-array name="array"> 
<item>stringl</item> 

</string-array> 

■ Reference a string-array in the layout using: 

"@array/array_name" 


■ Make a button call a method when clicked by adding the 
following to the layout: 

android:onClick="clickMethod" 

There needs to be a corresponding method in the 
activity: 

public void clickMethod(View view){ 
} 

■ R.java is generated for you. It enables you to get 
references for layouts, GUI components, Strings, and 
other resources in your Java code. 

■ Use f indviewByid () to get a reference to a view. 

■ Use set Text () to set the text in a view. 

■ Use getSelecteditem ( ) to get the selected item 
in a spinner. 

■ Add a custom class to an Android project by going to 
File menu—>New...—>Java Class. 
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I sent an intent asking who 
could handle my ACTION_CALL, 
and was offered all sorts of 
activities to choose from. 


3 multiple activities and Intents 


State Your Intent 



Most apps need more than one activity. 

So far we’ve just looked at single-activity apps, which is fine for simple apps. But when 
things get more complicated, just having the one activity won’t cut it. We’re going to show 
you how to build apps with multiple activities, and how you can get your activities 
talking to each other using intents. We’ll also look at how you can use intents to go 
beyond the boundaries of your app and make activities in other apps on your 
device perform actions. Things are about to get a whole lot more powerful... 


this is a new chapter 





tasks 


Apps can contain more than one activity 


Earlier in the book, we said that an activity is a single, defined thing 
that your user can do, such as displaying a list of recipes. If your 
app is simple, this may be all that’s needed. 

But a lot of the time, you’ll want users to do more than just one 
thing—for example, adding recipes as well as displaying a list of 
them. If this is the case, you’ll need to use multiple activities: one for 
displaying the list of recipes and another for adding a single recipe. 

The best way of understanding how this works is to see it in action. 
You’re going to build an app containing two activities. The first 
activity will allow you to type a message. When you click on a button 
in the first activity, it will launch the second activity and pass it the 
message. The second activity will then display the message. 


An activity is a single 
locused tiling your user 
can do. II you chain 
multiple activities together 
to do something more 
complex, it’s called a task. 


My Messenger 


My Messenger 


The -first adtivity lets 
you enter a message- 




A little message 
Send Message 


A little message 


1/Vhen you dlidk on the Send 
button in the 'first activity, 
it passes the message to the 
sedond activity- The sedond 
adtivity is laundhed and 
displays the message- 


Here's what we're going to do in this chapter 



o 

© 

© 

© 


Create an app with a single activity and layout. 

Add a second activity and layout. 

Get the first activity to call the second activity. 

Set the first activity to pass data to the second activity. 
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multiple activities and intents 


Here's the app structure 


The app contains two activities and two layouts. 


© 


When the app gets launched, it starts activity 
CreateMessage Activity. 

This activity uses the layout activity_create_message.xml. 


0 


When the user clicks a button in CreateMessageActivity, 
ReceiveMessageActivity is launched. 

This activity uses layout activity_receive_message.xml. 



Device 



activity_create_message.xml activity_receive_message.xml 

\ Te%t entered via 

CreateMessageActivity 
is transferred to 
RedeiveAlessajeA^tivity- 



CreateMessageActivity.java ReceiveMessageActivity.java 



fret started: create the project 

You create a project for the app in exactly the same way you did 
in previous chapters. Create a new Android Studio project for an 
application named “My Messenger” with a company domain of 
“hfad.com”, making the package name com. hf ad.mymessenger. 
The minimum SDK should be API 19 so that it will work on most 
devices. You’ll need an empty activity named “CreateMessageActivity” 
with a layout named “activity_create_message” so that your code 
matches ours. Make sure that you untick the Backwards 
Compatibility (AppCompat) option when you create the 
activity. 

On the next page, we’ll update the activity’s layout. 


Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 
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update layout 

Update the layout 

Here’s the XML for the activity_create_message.xml file. We’re using a 
<LinearLayout> to display components in a single column, and we’ve 
added <Button> and <EditText> elements to it. The <EditText> 
element gives you an editable text field you can use to enter data. 

Change your activity_create_message.xml file to match the XML here: 

<?xml version="1.0" encoding="utf-8"?> 


This is -the editable te%t -field- l-f it’s 
empty, it $ives the usev a hint about 
what text they should enter in it- 



<LinearLayout 

xmlns:android= M http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 

android:padding=" 16dp" using a linear layout 

android:orientation="vertical" y^h a vertical orientation- 

tools : context="com.hfad.mymessenger. CreateMessageActivity"> 

his dreates an editable text -field- 

<EditText 


□ 

MyMessenger 


413 

app/sre/main 


L CZI 


CO 

L Q 

layout 


android:id="@+id/message" 

android:layout_width="wrap_content" 

android:layout_height="wrap_content" 

android: layout_marginTop="20dp" The hint attribute gives the user a hint of 

android:hint="@string/hint" 
android:ems="10" /> 


activity_create_ 

message.xml 


what text they should type into the text 
f ield- IfVe need to add it as a String resource- 


<Button 


^^-This desdribes how wide the <Edit~fext> should be- It 
should be wide enough to addommodate 10 letter Ms. 


android:id="@+id/send" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginTop="2 Odp" 
android:onClick="onSendMe s sage" 
android:text="@string/send" /> 

Clidkin^ on the 
button runs the 
onSendMessa^eO 
method in the 
adtivity- 


t 

</LinearLayout> ^ IS ,s & String 

resourde we 
need to dreate- 



The <EditTex1> element 
defines an editable text 
field for entering text. It 
inherits from the same 
Android View class as the 
other GUI components 
we’ve seen so far. 
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Update strings.xwl... 


We used two String resources in our layout on the previous page. The 
button has a text value of @ string/send that appears on the button, 
and the editable text field has a hint value of @ string/hint that tells 
the user what to enter in the field. This means we need to add Strings called 
"send" and "hint" to strings.xml and give them values. Do this now: 

<resources> M 

_will appear on the button. 

<string name="send">Send Message</string> 

<string name="hint">Enter a message</string> 

</resources> 

The text u Enter a message” 
will appear as a hint in the 
text -field i-P its empty. 


...and add the method to the activity 


This line in the <Button> element: 


multiple activities and intents 

Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


□ 

MyMessenger 

app/sre/main 

ma 



values 



strings.xml 


android:onClick="onSendMessage" 

means that the onSendMessage () method in the activity will fire when 
the button is clicked. Let’s add this method to the activity now. 

Open up the CreateMessageActivity.java file and replace the code Android 
Studio created for you with the following: 


package com.hfad.mymessengere¬ 


import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 




Make sure your activity 
extends -the Activity dass. 


public class CreateMessageActivity extends Activity { 

>—The onCrea-teO method gets called 
@Override ^ when the activity is treated- 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_create_message); 

} 

//Call onSendMessage() when the button is clicked 


□ 

MyMessenger 

L C3 

app/sre/main 


H3 


java 


public void onSendMessage (View view) { ^ This wi „ ^ ^ 

* when the button's clicked- 

Well Complete the method 
body as we work our way 
through the rest ot the 
chapter. 


^3 


} 


Now that you’ve created the first activity, let’s move on to the 
second. 


com.hfad.mymessenger 

CreateMessage 

Activity.java 
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create activity 


Create the second activity and layout 

Android Studio has a wizard that lets you add extra activities and layouts to your 
apps. It’s like a scaled-down version of the wizard you use to create an app, and 
you use it whenever you want to create a new activity. 



Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


To create the new activity, switch to the Project view of Android Studio’s explorer, 
click on the com.hfad.mymessenger package in the app/src/main/java folder, choose 
File —> New —> Activity, and choose the option for Empty Activity. You will be 
presented with a new screen where you can choose options for your new activity. 

Every time you create a new activity and layout, you need to name them. Name 
the new activity “ReceiveMessageActivity” and the layout “activity_receive_ ^ 
message”. Make sure that the option to generate a layout is checked, and the 
Launcher Activity and Backwards Compatibility (AppCompat) options are 
unchecked. Finally, confirm that the package name is com. hf ad. mymessenger, 
and when you’re done, click on the Finish button. 


Some versions o-f 

Android Studio may 
ask you what the 
source language of 
your activity should 
be- |*f prompted; 
select the option -for 

Java- 



Make sure 
the option 
to generate 
the layout is 
dhedked. 


Undheek the 

Launcher 

Activity and 

Backwards 

Compatibility 

(AppCompat) 

options. 
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V 


What just happened? 

When you clicked on the Finish button, Android Studio 
created a shiny new activity file for you, along with a new 
layout. If you look in the explorer, you should see that a new 
file called ReceiveMessageActivity.java has appeared in the app/ 
src/main/java folder, and a file called activity_receive_message. 
xml has appeared under app/src/main/res/layout. 


multiple activities and intents 

Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


O O 


[jj CreateMessa 


H 65 I* * iX 0 & 


❖ N 


Each activity uses a different layout. 
CreateMessageActivity uses the 
layout activity_create_message. xml, and 
ReceiveMessageActivity uses 
the layout activity_receive_message, xml: 


Youv- lover 
window r»ay look '—^ 

di£fevent than 

ouv-s because w t ve 
switched “to tbe 
Pvojedt view. 




activity_create_message.xml activity_receive_message.xml 




CreateMessageActivity.java ReceiveMessageActivity.java 


Behind the scenes, Android Studio also made a configuration 
change to the app in a file called AndroidManifest.xml. Let’s 
take a closer look. 


jg^jas aggsy C" 1 -app Q src Pi main Cl res O drl 
\ Packages ► © ^ 

"AAres sender ~ / And roi dStudi oProj sets/ MyM esse n| 

► O.gradle 

► O.idea 

w Clapp 

► D build 
O libs 
v D src 

► OandroidTest 
▼ Qmain 
▼ Djava 

Awdvoid Studio T E] com.hfad.mymessenger 
added Receive c 1 ^ CreateMessageActivity 

MessageAttivity-'^ c 1 * ReceiveMessageActivity 


▼ Cl res 


d ramble 


▼ B layout 

It added its <> activity_create_message.xmi 

layout -file too— « activity_receive_message.xrnl 

► IS mipmap-hdpi 

► IS mipmap-rndpi 

► IS mipmap-xhdpii 

► IS mipmap-xxhdpi 

► IS mipmap-xxxhdpi 

► ISvalues 

^ Android Manifest.xml 


L 


0: Messages \ ’ Terminal >ff> 6: Android Monitor 


Cradle build finished in 2s 832ms (2 minutes ago) 
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AndroidManifest.xml 


Welcome to the Android manifest file 

Every Android app must include a file called AndroidManifest.xml. You can 
find it in the app/src/main folder of your project. The AndroidManifest.xml 
file contains essential information about your app, such as what activities it 
contains, required libraries, and other declarations. Android creates the file for 
you when you create the app. If you think back to the settings you chose when 
you created the project, some of the file contents should look familiar. 

Here’s what our copy of AndroidManifest.xml looks like: 


Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


□ 

MyMessenger 

H3 

V4.ta.fw / ^" pp '"uS 

AndroidMani-Pest*ml ! </ Xml j 

in "this -Polder. AndroidManifest.xml 



<?xml version= n l.0 M encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 

package="com.hfad.mymessenger"> ^— This is the padkage 

name we spedi-fied- 

Application 

android:allowBackup= M true" 
android:icon="Qmipmap/ic_launcher 
android:label="@string/app_name" 


Android Studio gave our 
app de-fault idons. 



If you 
develop 
Android 
apps 
without 
an IDE, you’ll 
need to create 
this file manually. 


Watch it! 


android:roundIcon="@mipmap/ic_launcher_round" 

android:supportsRtl="true" The theme a-P-Pedts the 

android: theme="@style/AppTheme"> appearande o-P the app. 

Well look at this later. 

This is (Activity android: name=" . CreateMessageActivity"> 
the -first \ <intent-filter> 

adtivity, j <action android: name=" android. intent. action . MAIN" /> 

Create 
Message 

Adtivity. , I 

f</activity> This says the adtivity taw 

be used to launth the app 


This bit spedi-Pies 
that it's the main 
adtivity ot the app. 


<category android:name= 
</intent-filter> 


'android.intent.category.LAUNCHER" /> 




Activity android:name=".ReceiveMessageActivity"></activity> 

* 


</application> 


</manifest> 


This is the sedond adtivity, 
RedeiveMessageAdtivity- Android 
Studio added this dode when we 
added the sedond adtivity- 
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Every activity needs to be declared 

All activities need to be declared in AndroidManifest.xml. If an 
activity isn’t declared in the file, the system won’t know it exists. 
And if the system doesn’t know it exists, the activity will never run. 

You declare an activity in the manifest by including an 
<activity> element inside the <application> element. 

In fact, every activity in your app needs a corresponding 
<activity> element. Here’s the general format: 


If I'm not included in 
AndroidManifest.xml then 
as far as the system's 
concerned, I don't exist 
and will never run. 


application 


s £ath activity needs bo be declared 
inside the <appli£at»on> element- 

. . . > 

<activity 

android:name=" .MyActivityClassName 


.> 


* The activity may have 
othev- proper-ties too. 


This line is mandatory; just 
replace MyA^tivityClassNa r 
with the name o-f your 
activity- 


o 

0 



Activity 


</activity> 


</application> 


The following line is mandatory and is used to specify the class name 
of the activity, in this example "MyActivityClassName": 

android:name=".MyActivityClassName" 

MyActivityClassName is the name of the class. It’s prefixed 
with a because Android combines the class name with the 
name of the package to derive the fully qualtfied class name. 


Um . 

W ■ The second 

activity in our 
app was 

Watch it: automatically 
declared 

because we added it using 
the Android Studio wizard. 


The activity declaration may include other properties too, such as 
security permissions, and whether it can be used by activities in 
other apps. 


If you add extra activities 
manually, you’ll need to edit 
AndroidManifest.xml yourself. 
The same may be true if you use 
another IDE besides Android 
Studio. 
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intents 


An intent is a type of message 

So far we’ve created an app with two activities in it, and each activity 
has its own layout. When the app is launched, our first activity, 
CreateMessageActivity, will run. What we need to do next is get 
CreateMessageActivity to call ReceiveMessageActivity 
when the user clicks the Send Message button. 

Whenever you want an activity to start a second activity, you use an intent. 
You can think of an intent as an “intent to do something.” It’s a type of 
message that allows you to bind separate objects (such as activities) together 
at runtime. If one activity wants to start a second activity, it does it by 
sending an intent to Android. Android will then start the second activity 
and pass it the intent. 



Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 

You start an activity 
hy creating an 
intent and using it 
in the startActivityO 
method. 



You can create and send an intent using just a couple of lines of code. You 
start by creating the intent like this: 

Intent intent = new Intent(this f Target.class) 

The first parameter tells Android which object the intent is from: you can 
use the word this to refer to the current activity. The second parameter is 
the class name of the activity that needs to receive the intent. 

Once you’ve created the intent, you pass it to Android like this: 


The intent specifies -the activity 
you want to receive it- Its like 
putting an address on an envelope- 


v 


Intent 



To: AnotherActivity 


startActivity(intent); 


This tells Android to start the activity specified by the intent. 


startActivityO starts the 
activity speditied in the intent” 


Once Android receives the intent, it checks that everything’s OK 
and tells the activity to start. If it can’t find the activity, it throws an 

ActivityNotFoundException. 



86 Chapter 3 


















Use an intent to start the second activity 

Let’s put this into practice and use an intent to call 
ReceiveMessageActivity. We want to launch the activity 
when the user clicks on the Send Message button, so we’ll add 
the two lines of code we discussed on the previous page to our 
onSendMessage () method. 

Make the changes highlighted below: 

package com.hfad.mymessenger; 


v 


multiple activities and intents 

Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


import android.app.Activity; 

import android. content. Intent; ^ W( ^ ^ ^ ^ d)ass 

import android. os . Bundle; aKdroidtontentIhteht as weVe usmg 

import android.view.View; i"t in onSendMessageO. 


public class CreateMessageActivity extends Activity { 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_create_message); 


□ 

MyMessenger 

H* 

app/src/main 

Lfia 


java 




//Call onSendMessage() when the button is clicked 
public void onSendMessage(View view) { 

Intent intent = new Intent(this, ReceiveMessageActivity.class); 
startActivity(intent );^ ^ 


com.hfad.mymessenger 

CreateMessage 
Activity.java 


Sia\rt ulivily Reteivc/l/J essaqe Atlivily. 


} 

So what happens now when we run the app? 
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what happens 


What happens when you run the app 

Before we take the app out for a test drive, let’s go over how the 
app we’ve developed so far will function: 



Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


© 


When the app gets 
launched, the main activity, 
CreateMessageActivity, starts. 

When it starts, the activity specifies 
that it uses layout activity_create_ 
message, xml. This layout gets 
displayed in a new window. 



o 


The user types in a message 
and then clicks on the button 

The onSendMessage () method 
in CreateMessageActivity 
responds to the click. 


onSendMessage() 


O VllUCllUL'lCCiS 

-o 


Device 


CreateMessageActivity 


O The onSendMessage() 

method uses an intent to 
tell Android to start activity 
ReceiveMessageActivity. 

Android checks that the 
intent is valid, and then it tells 
ReceiveMessageActivity to 
start. 


onSendMessage() 
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multiple activities and intents 


The story continues... 


O 


When ReceiveMessageActivity 
starts, it specifies that it 
uses layout activity_receive_ 
message.xml and this layout 
gets displayed in a new window. 


Test drive the app 


O 



Save your changes, and then run the app. CreateMessageActivity 
starts, and when you click on the Send Message button, it launches 
ReceiveMessageActivity. 


v 

v 

-H3 


i 

k a Q 3:53 

My Messenger 


A little message 

■V! 


Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


1 


Q 3:53 


Send Message 


vr 


iter B message, 
and -thcKt di£k on 
•the Send Message 

button- 


o My Messenger 


1/Vben you dlidk on tbe Send 
Message button, tbe activity 
RedeiveMessageMtivity starts, and 
its activity -fills tbe sdreen- This 
activity is duv-rently blank because 
this is tbe de-fault layout /Wroid 
Studio gave us. 
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pass text 


Pass text to a second activity 

So far we’ve coded CreateMessageActivity to start 
ReceiveMessageActivity when the Send Message button is 
pressed. Next, we’ll get CreateMessageActivity to pass text to 
ReceiveMessageActivity so that ReceiveMessageActivity 
can display it. In order to accomplish this, we’ll do three things: 




Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 



o 

© 

o 


Tweak the layout activity_receive_message. xml so that it can 
display the text. At the moment it’s simply the default 
layout the wizard gave us. 

Update CreateMessageActivity.java so that it gets the text 
the user inputs, and then adds the text to the intent 
before it sends it. 

Update ReceiveMessageActivity.java so that it displays the 
text sent in the intent. 


activity_create_ activity_receive_ 



CreateMessage 

Activity.java 


ReceiveMessage 

Activity.java 


let's start with the layout 


We’ll begin by changing the activity_receive_message.xml code Android 
Studio created for us so that it uses a<LinearLayout>. Update 
your version of the code so that it matches ours: 


Were uii* to «*se a linear layout V.tt a verbal 
orientation as we did in aetivity_ftreate_™essa 9 e.*nt 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android= M http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_jparent" 
android:layout_height="match_j?arent" 
android:padding=" 16 dp" 
android:orientation="vertical" 

tools:context="com.hfad.myme s senger.ReceiveMe s sageActivity"> 
</LinearLayout> 


□ 

MyMessenger 


HT3 

app/src/main 

HI□ 


res 


MU 

layout 



activity_receive_ 

message.xml 


We need to change the layout so that it includes a text view. The text view needs to have an ID 
of “message” so that we can reference it in our activity code. How should we change the layout’s 
code? Think about this before looking at the next page. 
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Update the text view properties 

We need to add a <TextView> element to the layout, and give 
it an ID of “message.” This is because you have to add an ID to 
any GUI components you need to reference in your activity code, 
and we need to reference the text view so that we can update the 
text it displays. 

We’ve updated our code so that it includes a new text view. 
Update your activity_recewe_message.xml code so that it reflects ours 
(we’ve bolded our changes): 


v 

V 


multiple activities and intents 

Create 1 st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="16dp" 
android:orientation="vertical" 

tools:context="com.hfad.mymessenger.ReceiveMessageActivity"> 

^✓^-This adds the -text view. 

<TextView z^-This line jives the te*t view 

android:id="@+id/message"^- an |p 0 ( Vessaje” 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" /> 

</LinearLayout> 


□ 

MyMessenger 

4B 


app/src/main 

^3 


mu 

layout 


activity_receive_ 

message.xml 


We’ve not specified default text for the text 
view, as the only text we’ll ever want to display 
in the text view is the message passed to it by 
CreateMessageActivity. 

Now that we’ve updated the layout, we can get 
to work on the activities. Let’s start by looking at 
how we can use an intent to pass a message to 
ReceiveMessageActivity. 


th&ve-icffe no 

- Dumb Questions - 

% Do I have to use intents? Can’t I just construct an 
instance of the second activity in the code for my first 
activity? 

That’s a good question, but no, that’s not the “Android 
way” of doing things. One of the reasons is that passing intents 
to Android tells Android the sequence in which activities are 
started. This means that when you click on the Back button on 
your device, Android knows exactly where to take you back to. 
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extra extra 


putExtraO puts extra info in an intent 

You’ve seen how you can create a new intent using: 

Intent intent = new Intent(this. Target.class); 



Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


You can add extra information to this intent that can be picked up by 
the activity you’re targeting so it can react in some way. To do this, you 
use the putExtra () method like so: 

intent.putExtra("message", value); 

where message is a String name for the value you’re passing in, and 
value is the value. The putExtra () method is overloaded so 
value has many possible types. As an example, it can be a primitive 
such as a boolean or int, an array of primitives, or a String. You can 
use putExtra () repeatedly to add numerous extra data to the intent. 
If you do this, make sure you give each one a unique name. 

How to retrieve extra information from an intent 

The story doesn’t end there. When Android 
tells ReceiveMessageActivity to start, 
ReceiveMessageActivity needs some way of retrieving the 
extra information that CreateMessageActivity sent to Android 
in the intent. 


puiExiraO lets 
you put extra 
in-Pormaiion in 
the message 
youVe sending. 


Intent 



V, To: ReceiveMessageActivity 




message: "Hello!" 



There are many different options 
-for the type o-f value- You 
ean see them all in the 6\ oogle 
Android documentation. Android 
Studio will also give you a list as 
you type Code in. 


There are a couple of useful methods that can help with this. The first 
of these is: 


getlntent() ; 


get Intent () returns the intent that started the activity, and you 
can use this to retrieve any extra information that was sent along with 
it. How you do this depends on the type of information that was sent. 

As an example, if you know the intent includes a String value named 
"message”, you would use the following: 

£jei *the inieni- 

Intent intent = getlntent ();^ 

String string = intent.getstringExtra("message") 

You’re not just limited to retrieving String values. As an example, you 
can use: 


Intent 



To: ReceiveMessageActivity 
message: "Hello!" 

; 

' ^ei ihc Siring passed along 
wiih ihe inieni ihai has a 
name of “message” 


int intNum = intent.getlntExtra("name", default_value); 


to retrieve an int with a name of name, def ault_value specifies 
what int value you should use as a default. 
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multiple activities and intents 


package com.hfad.mymessenger; 

import android.app.Activity; 
import android.os.Bundle; 
import android.content.Intent; 
import android.view.View; 



public class CreateMessageActivity extends Activity { 


Pdd] plizzjc 

Your job is to take code snippets from 
the pool and place them into the 
blank lines in CreateMessageActivity. 
java. You may not use the same 
code snippet more than once, 
and you won't need to use all 
the code snippets. Your goal is to 
make the activity retrieve text from 
the message <EditText> and add it 
to the intent. 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_create_message); 

} 


//Call onSendMessage() when the button is clicked 
public void onSendMessage(View view) { 


Intent intent = new Intent(this, ReceiveMessageActivity.class); 


startActivity(intent); 
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pool solution 


package com.hfad.mymessenger; 

import android.app.Activity; 
import android.os.Bundle; 

import android.content.Intent; . . , 

you l r\tt& to import 

import android.view.View; ^ t | ass . 

. 



P®®] puzz]e ^®]ufi®n 

Your job is to take code snippets from 
the pool and place them into the 
blank lines in CreateMessageActivity. 
jovo. You may not use the same 
code snippet more than once, 
and you won't need to use all 
the code snippets. Your goal is to 
make the activity retrieve text from 
the message <EditText> and add it 
to the intent. 


public class CreateMessageActivity extends Activity { 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_create_message); 

} 


} 


//Call onSendMessage() when the button is clicked 
public void onSendMessage(View view) { 

EditText messageView = (EditText) findViewByld(R.id.message); 

String messageText = messageView.getText().toString(); — 


$cl -the 

•fvom tbe editable 
te*t -f ield with a* 
IP o-f “message w 


Intent intent = new Intent(this, ReceiveMessageActivity.class); 

i n tent .put Ext ra ("m essa g e" messag eText); 

startActivity (intent); ^ ^dd ^ ^ ^ ^ 

giv'mg it a name o-f “message” 
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multiple activities and intents 


Update the CreateMessageActivity code 

We updated our code for CreateMessageActivity.java so that it 
takes the text the user enters on the screen and adds it to 
the intent. Here’s the full code (make sure you update your 
code to include these changes, shown in bold): 


v 

V 


Create 1 st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


package com.hfad.mymessenger; 

import android.app.Activity; 
import android.os.Bundle; 
import android.content.Intent; 
import android.view.View; 


□ 

MyMessenger 


K3 

app/src/main 


yku need *to ir*fov-*t EditText 

import android.widget.EditText; tT c la ? awdroid-wdytEditTwt a* 

you rt using it in youv ad'tivi'ty todt 

public class CreateMessageActivity extends Activity { 




java 




com.hfad.mymessenger 


CreateMessage 

Activity.java 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_create_message); 

} 


$ci ihe -fcex-fc -that's in 
the EditText- 
)C 

EditText messageView = (EditText)findViewByld(R.id.message); 


//Call onSendMessage() when the button is clicked 
public void onSendMessage(View view) { 


String messageText = messageView.getText().toStringO; 

Intent intent = new Intent(this, ReceiveMessageActivity.class); 



intent.putExtra(ReceiveMessageActivity.EXTRA_MESSAGE, messageText); 


startActivity(intent) ; 

'T 

S-tav-t RcdcivcMcssajcAdtivi-ty 

with "the in-tent 


Now that CreateMessageActivity has added 
extra information to the intent, we need to retrieve that 
information and use it. 


Create an intent; 'then add the text 
to -the intent- WlcVe using a Constant 
-for the nar*e o-f the extra in-for^ation 
so that we know CreateMessageActivity 
and RedeiveMessageActivity art using the 
same String. Well aAA this donstdnt -to 
RedeiveMessageActivity the nex-t fage, 
so don’t worry i-f Android Studio says it 
doesn't exist- 
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getStringExtraQ 


(ret ReceiveMessageActivity to use 
the information in the intent 



Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


Now that we’ve changed CreateMessageActivity to add 
text to the intent, we’ll update ReceiveMessageActivity 
so that it uses that text. 

We’re going to get ReceiveMessageActivity to display the 
message in its text view when the activity gets created. Because 
the activity’s onCreate () method gets called as soon as the 
activity is created, we’ll add the code to this method. 

To get the message from the intent, we’ll first get the intent using 
the getlntent () method, then get the value of the message 
using getStringExtra () . 

Here’s the full code for ReceiveMessageActivity.java (replace the code 
that Android Studio generated for you with this code, and then 
save all your changes): 

package com.hfad.mymessenger; 



CreateMessage 

Activity.java 


ReceiveMessage 

Activity.java 

f 

lVe need -to make 
RedeiveAlessageAd-tiviiy 
deal wi-ih -the irrten-t ii 


receives. 


import android.app.Activity; 
import android.os.Bundle; 
import android.content.Intent; 
import android.widget.TextView; 


1/Ve need io import 
-these classes. 

Alake sure your 
activity extends 
the Activity class. 

public class ReceiveMessageActivity extends Activity { 


"message” 


□ 

MyMessenger 


4 ■ 

app/src/main 

L Q 


java 


413 


public static final String EXTRA MESSAGE = 

This is the name ot the extra valve we're passing in the mtent- 

@Override 


com.hfad.m ymess enger 


ReceiveMessage 

Activity.java 


protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_receive_message); 

Intent intent = getlntent () ; 

String messageText = intent.getStringExtra(EXTRA_MESSAGE); 
TextView messageView = (TextView)findViewByld(R.id.message); 
messageView.setText(messageText); 

• ^ 

Add *thc *te*t bo *thc message tertt view. 


^tb -the intent, and get 
•the message -Prom it using 
getStri ngExtraO. 


Before we take the app for a test drive, let’s run through what the 
current code does. 
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What happens when the user clicks the Send Message button 


© 


When the user clicks on the 
button, the onSendMessage() 
method is called. 

Code within the onSendMessage () 
method creates an intent to start activity 
ReceiveMessageActivity, adds 
a message to the intent, and passes it to 
Android with an instruction to start the 
activity. 


onSendMessage() 

f 




CreateMessageActivity 


To: ReceiveMessage 
Activity 
message: "Hi!" 




w 

Android 


o 


Android checks that the 
intent is OK. and then tells 
ReceiveMessageActivity to start. 



© 


When ReceiveMessageActivity 
starts, it specifies that it uses 
layout activity_receive_message. 
xml, and this gets displayed on 
the device. 

The activity also updates the layout so 
that it displays the extra text included in 
the intent. 




activity_receive_message 
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test drive 



Test drive the app 

Make sure you’ve updated the two activities, save your changes, and 
then run the app. CreateMessageActivity starts, and when you 
enter some text and then click on the Send Message button, it launches 
ReceiveMes sage Activity. The text you entered is displayed in the 
text view. 


v 

V 

v/ 

-Hv 


Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 



These av-e both -full-sdreen, but we’ve 
snipped away some of the blank spade. 


We can change the app to send messages to other people 


Now that we have an app that sends a message to another activity, we 
can change it so that it can send messages to other people. We can do 
this by integrating with the message sending apps already on the device. 
Depending on what apps the user has, we can get our app to send messages 
via Gmail, Google+, Facebook, Twitter... 


Hey, hold it right there! That sounds 
like a freaky amount of work to 
get our app working with all those 
other apps. And how the heck do I 
know what apps people have on their 
devices anyway? 


It’s not as hard as it sounds thanks to the way Android 
is designed to work. 

Remember right at the beginning of the chapter when we said that tasks 
are multiple activities chained together? Well, you’re not just limited 
to using the activities within your app. You can go beyond the 
boundaries of your app to use activities within other apps as well. 
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How Android apps work 

As you’ve seen, all Android apps are composed of one or more 
activities, along with other components such as layouts. Each 
activity is a single defined focused thing the user can do. As an 
example, apps such as Gmail, Google+, Facebook, and Twitter all 
have activities that enable you to send messages, even though they 
may achieve this in different ways. 


v 

v 


multiple activities and intents 

Create 1st activity 
Create 2nd activity 
Call 2nd activity 
Pass data 


Device 



Bach app is Composed ot a 
buneh o\ activities. (There 
av-e other Components too, 
but weVe just -fodusm^ on 
tbe activities ri^ht now) 


Intents can start activities in other apps 


You’ve already seen how you can use an intent to start a second 
activity within the same app. The first activity passes an intent 
to Android, Android checks it, and then Android tells the second 
activity to start. 


The same principle applies to activities in other apps. You get an 
activity in your app to pass an intent to Android, Android checks it, 
and then Android tells the second activity to start even though it's in 
another app. As an example, we can use an intent to start the activity 
in Gmail that sends messages, and pass it the text we want to send. 
That means that instead of writing our own activities to send emails, 
we can use the existing Gmail app. 


This is 
-tbe app 
you vc been 
working on 
throughout 
the chapter. 


My Messenger 



Intent \—' 

mm — 


OTfj 

w 

Android 


Intent 


You can Create an intent to start 
another activity even it the 
activity is within another app. 

I 


Gmail 



This means that you can build apps that perform powerful tasks by 
chaining together activities across the device. 
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use actions 


Put we don't know what apps are on the user's device 


There are three questions we need answers to before we can call activities 
in other apps: 


o 

o 

o 


How do we know which activities are available on the user’s device? 

How do we know which of these activities are appropriate for what we want to do? 
How do we know how to use these activities? 


The great news is that we can solve all of these problems using actions. 
Actions are a way of telling Android what standard operations activities 
can perfom. As an example, Android knows that all activities registered for 
a send action are capable of sending messages. 


Let’s explore how to create intents that use actions to return a set of 
activities that you can use in a standard way—for example, to send 
messages. 


Here's what you're going to do 

Q Create an intent that specifies an action. 


The intent will tell Android you want to use an activity that can send a message. The intent 
will include the text of the message. 


o 


Allow the user to choose which app to use. 

Chances are, there’ll be more than one app on the user’s device capable of sending 
messages, so the user will need to pick one. We want the user to be able to choose one every 
time they click on the Send Message button. 
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Create an intent that specifies an action 


multiple activities and intents 

0 Specify action 
Create chooser 


So far you’ve seen how to create an intent that launches a specific activity using: 


Intent intent = new Intent(this, ReceiveMessageActivity.class); 


This intent is an example of an explicit intent; you explicitly tell Android 
which class you want it to run. 

If there’s an action you want done but you don’t care which activity does it, you 
create an implicit intent. You tell Android what sort of action you want it to 
perform, and you leave the details of which activity performs it to Android. 


We*ve *told 'the intent which 
dlass its intended -for, bu*t 
what i*P we don't know? 


How to create the intent 

You create an intent that specifies an action using the following syntax: 

Intent intent = new Intent(action); 

where action is the type of activity action you want to perform. Android 
provides you with a number of standard actions you can use. As an example, 
you can use Intent. ACTION_DIAL to dial a number, 

Intent. ACTION_WEB_SEARCH to perform a web search, and 
Intent. ACTION_SEND to send a message. So, if you want to create an 
intent that specifies you want to send a message, you use: 

Intent intent = new Intent(Intent.ACTION_SEND); 

Adding extra information 

Once you’ve specified the action you want to use, you can add extra 
information to it. We want to pass some text with the intent that will form the 
body of the message we’re sending. To do this, you use the following lines of 
code: 


You can line! out 
more about the 
sorts ol activity 
actions you can 
use and the extra 
information they 
support in the 
Android developer 
reference material: 
http:A/tinyuvl.com/ 


nSPcjhS. 


intent.setType("text/plain"); 

intent. putExtra (Intent. EXTRA_TEXT, messageText) ; ^ ^These attributes relate 

to UMCTI0H_££MV- 

where messageText is the text you want to send. This tells Android that They're not relevant -for 

you want the activity to be able to handle data with a MIME data-type of a || anions, 

text/plain, and also tells it what the text is. 


You can make extra calls to the putExtra () method if there’s additional 
information you want to add. As an example, if you want to specify the subject 
of the message, you can use: 

intent.putExtra(Intent.EXTRA_SUBJECT, subj ect) ; 

where subject is the subject of the message. 


I( subject isn't relevant to a 
particular app, i-t will just ignore 
this in-formation. Any apps that 
know how to use it will do so. 
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use an action 


Change the intent to use an action 

We’ll update CreateMessageActivity.java so that we create an implicit 
intent that uses a send action. Make the changes highlighted below, 
and save your work: 


-►I | Specify action 

Create chooser 


package com.hfad.mymessenger; 

import android.app.Activity; 
import android.os.Bundle; 
import android.content.Intent; 
import android.view.View; 
import android.widget.EditText; 

public class CreateMessageActivity extends 


□ 

MyMessenger 

L Q 

app/src/main 

Lfia 


java_ 

m 

com, hfad.mymessenger 


Activity { 


CreateMessage 

Activity.java 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_create_message); 


} 


//Call onSendMessage() when the button is clicked 
public void onSendMessage(View view) { 

EditText messageView = (EditText)findViewByld(R.id.message); 


Remove -these 
-two lines. 


String messageText 


messageView.getText() .toString (); 


\ 'H s r l ~ pi 1 1 Fr 5 ^ra pi s ag^^M vi EM TPA_ME q S ACE 7 —mrmngrT^rt) j 

Intent intent = new Intent(Intent.ACTION_SEND); ) 
intent.setType("text/plain"); 

intent.putExtra(Intent.EXTRA_TEXT, messageText);) ] 

startActivity(intent); 


} 


Instead Jr dveatinj an intent that's 
e*pliditly tv- RedeiveMessajeAdtWity, we've 
tveatinj an intent that uses a send adtion- 


Now that you’ve updated your code, let’s break down 
what happens when the user clicks on the Send 
Message button. 
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What happens when the code runs 


Q When the onSendMessoge() method 
is colled, an intent gets created. 
The startActivityO method passes 
this intent to Android. 

The intent specifies an action of 
ACTION_SEND, and a MIME type of 
text/plain. 


onSendMessage() 

o- 

CreateMessageActivity 


Intent 

-E3-* 

ACTION_SEND 
type: "text/plain" 
messageText: "Hi!" 


orjo 

\nj 

Android 


v 


Specify action 
Create chooser 


© 


Android sees that the intent can only 
be passed to activities able to handle 
ACTION_SEND and text/plain data. 
Android checks all the activities on the 
users device, looking for ones that are 
able to receive the intent. 

If no actions are able to handle the intent, an 
ActivityNotFoundException is thrown. 


Aha, an implicit intent. I need 
to find all the activities that 
can handle ACTION_SEND / and 
data of type text/plain, and 
have a category of DEFAULT. 


CreateMessageActivity 


Android 




If just one activity is able to receive 
the intent. Android tells that activity 
to start and passes it the intent. 



CreateMessageActivity 


Intent 




Android 
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what happens 


The story continues... 



Specify action 
Create chooser 



If more than one 
activity is able to 
receive the intent, 
Android displays an 
activity chooser dialog 
and asks the user 
which one to use. 



User 


O 


When the user 
chooses the activity 
she wants to use. 
Android tells the 
activity to start and 
passes it the intent. 
The activity displays the 
extra text contained in 
the intent in the body of 
a new message. 



ChosenActivity 


In order to pass the intent to an activity, Android must 
first know which activities are capable of receiving the 
intent. On the next couple of pages we’ll look at how it 
does this. 
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multiple activities and intents 

The intent filter tells Android which 
activities can handle which actions 

When Android is given an intent, it has to figure out which activity, or 
activities, can handle it. This process is known as intent resolution. 

When you use an explicit intent, intent resolution is straightforward. 

The intent explicitly says which component the intent is directed 
at, so Android has clear instructions about what to do. As an 
example, the following code explicitly tells Android to start 
ReceiveMessageActivity: 


v 


Specify action 
Create chooser 


Intent intent = new Intent(this, ReceiveMessageActivity.class); 
startActivity(intent) ; 


When you use an implicit intent, Android uses the information in the 
intent to figure out which components are able to receive it. It does this 
by checking the intent filters in every app’s copy of AndroidManifest.xml. 


An intent filter specifies what types of intent each component can 
receive. As an example, here’s the entry for an activity that can handle 
an action of ACTION_SEND. The activity is able to accept data with 
MIME types of text/plain or image: 




<activity android:name="ShareActivity"> 

<intent-filter> 


This is jus-t a* example; 
•ihevVs y\o activity 
called u £ha\reAdiivity w 

ih our project- 


This -tells Android -the 
ad-tivi-ty dan handle 
fiCTlOHj&tJ). 


<action android:name="android.intent.action.SEND"/> 

category.DEFAULT"/> 

These are -the types 
o( data -the ad-tivity 
</intent-filter> ean handle. 

</activity> 


<category android:name="android.intent. 
<data android:mimeType="text/plain"/> 
<data android:mimeType="image/*"/> 


The intent: -filter 
must include 
a eate^ory ox 
DEFAULT or it 
won*t be able to 
redeive implicit 
intents. 


The intent filter also specifies a category. The category supplies extra 
information about the activity such as whether it can be started by a 
web browser, or whether it’s the main entry point of the app. An intent 
filter must include a category of android. intent. category. 
DEFAULT if it’s to receive implicit intents. If an activity has no intent 
filter, or it doesn’t include a category name of android. intent. 
category. DEFAULT, it means that the activity can’t be started with 
an implicit intent. It can only be started with an explicit intent using the 
full name (including the package) of the component. 
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intent filters 


How Android uses the intent filter 



Specify action 
Create chooser 


When you use an implicit intent, Android compares the information given 
in the intent with the information given in the intent filters specified in every 
app 5 s AndroidManifest. xml file. 

Android first considers intent filters that include a category of android. 
intent.category. DEFAULT: 

<intent-filter> 

<category android:name="android.intent.category.DEFAULT"/> 


</intent-filter> 


Intent filters without this category will be omitted, as they can’t receive 
implicit intents. 


Android then matches intents to intent filters by comparing the action and 
MIME type contained in the intent with those of the intent filters. As an ^ 
example, if an intent specifies an action of Intent. ACTION_SEND using: 

Intent intent = new Intent(Intent.ACTION_SEND); 


II will also look a-t -the datejory o-P 
•the iivteirt -Pilier i-p one is supplied by 
•the in-ten-t- However, -this -Pea-ture isn't: 
used very of--ten, so we don'-t £over 
how to add £a-tegories to irrien-ts. 


Android will only consider activities that specify an intent filter with an action 
of android. intent. action . SEND like this: 


<intent-filter> 

<action android:name="android.intent.action.SEND"/> 


</intent-filter> 

Similarly, if the intent MIME type is set to text/plain using: 
intent.setType("text/plain"); 

Android will only consider activities that can accommodate this type of data: 
<intent-filter> 

<data android:mimeType="text/plain"/> 


</intent-filter> 

If the MIME type is left out of the intent, Android tries to infer the type 
based on the data the intent contains. 

Once Android has finished comparing the intent to the component’s intent 
filters, it sees how many matches it finds. If Android finds a single match, it 
starts the component (in our case, the activity) and passes it the intent. If it 
finds multiple matches, it asks the user to pick one. 
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BE ff*e Infer if 

Your job is to play like you’re 
the intent on the right and say 
which of the activities described 
below are compatible 
with your action and 
data. Say why, or why 
not, for each one. 



Heve’s the intent- 


Intent intent = new Intent(Intent.ACTION_SEND); 


intent.setType("text/plain"); 


intent.putExtra(Intent.EXTRA_TEXT, "Hello"); 


<activity android:name="SendActivity"> 

<intent-fliter> 

<action android:name="android.intent.action.SEND"/> 
<category android:name="android.intent.category.DEFAULT"/> 
<data android:mimeType="*/*"/> 

</intent-filter> 

</activity> 


<activity android:name="SendActivity"> 

<intent-filter> 

<action android:name="android.intent.action.SEND"/> 
<category android:name="android.intent.category.MAIN"/> 
<data android:mimeType="text/plain"/> 

</intent-filter> 

</activity> 


<activity android:name="SendActivity"> 

<intent-filter> 

<action android:name="android.intent.action.SENDTO"/> 
<category android:name="android.intent.category.MAIN"/> 
<category android:name="android.intent.category.DEFAULT"/> 
<data android:mimeType="text/plain"/> 

</intent-filter> 

</activity> 
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BE tb& Infenf §©]ug©ti 

Your job is to play like you’re the 
intent on the right and say which 
of the activities described below 
are compatible with 
your action and 
data. Say why or 
why not, for each 
one. 



Intent intent = new Intent(Intent.ACTION_SEND); 
intent.setType("text/plain"); 

intent.putExtra(Intent.EXTRA_TEXT, "Hello"); 


This adtivity addepts ACT|0N_SEND and 
/ dan handle data of any MIME type, so it dan 
V-esPond "to the in-tent 


<activity android:name="SendActivity"> 

<intent-fliter> 

<action android:name="android.intent.action.SEND"/> 
<category android:name="android.intent.category.DEFAULT"/> 
<data android:mimeType="*/*"/> 

</intent-filter> 

</activity> 


<activity android:name="SendActivity"> 

<intent-filter> 

<action android:name="android.intent.action.SEND"/> 
<category android:name="android.intent.category.MAIN"/> 
<data android:mimeType="text/plain"/> 

</intent-filter> 

</activity> 


\Y This adtivity doesn't have a dategov-y of 
DEFAULT so dan't redeive the intent- 


<activity android:name="SendActivity"> 

<intent-filter> someone 

<action android:name="android.intent.action.SENDTO"/> 
<category android:name="android.intent.category.MAIN"/> 
<category android:name="android.intent.category.DEFAULT"/> 
<data android:mimeType="text/plain"/> 

</intent-filter> 

</activity> 


This 3d*tivi*ty ACT|0N__S£ND m*ten*ts, or\ly 

ACTlOMjZtWVTO (whith allov/s you -to se*d a message 

someone spe^i-fied *m *the m*tc^‘ts da*ta)* 
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You need to run your app on a REAL device 

So far we’ve been running our apps using the emulator. The emulator only 
includes a small number of apps, and there may well be just one app that 
can handle ACTION_SEND. In order to test our app properly, we need to 
run it on a physical device where we know there’ll be more than one app 
that can support our action—for example, an app that can send emails 
and an app that can send text messages. 

Here’s how you go about getting your app to run on a physical device. 

1. Enable USP debugging on your device 

On your device, open “Developer options” (in Android 4.0 
onward, this is hidden by default). To enable “Developer 
Ye?' options,” go to Settings —> About Phone and tap the build 

seriously — ^ number seven times. When you return to the previous 

screen, you should now be able to see “Developer options.” 

Within “Developer options,” turn on USB debugging. 

You need bo enable USB debugging 


l. Set up your system to detect your device 

If you’re using a Mac, you can skip this step. 

If you’re using Windows, you need to install a USB driver. You can 
find the latest instructions here: 

http://developer, android, com/tools/extras/oem-usb. html 

If you’re using Ubuntu Linux, you need to create a udev rules file. 
You can find the latest instructions on how to do this here: 


v 


Specify action 
Create chooser 


N 

fi I 13:38 

= Developer options 

: 

On 

• 

Automatic system updates 

• 1 



Demo mode 


Debugging 


USB debugging 

Debug mode when USB is connected 


Revoke USB debugging authorisations 


Bug report shortcut 

Show a button in the power menu for taking a bug M 
report 


Select mock location app 

No mock location app set 

Enable view attribute inspection 
Select debug app 



http://developer, android, com/tools/device. html#setting-up 


3. Plug your device into your computer with a U$& cable 

Your device may ask you if you want to accept an RSA key that allows USB 
debugging with your computer. If it does, you can check the “Always allow 
from this computer” option and choose OK to enable this. 
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running on real devices 


Running your app on a real device (continued) 



Specify action 
Create chooser 


4. Stop your app running on the emulator 

Before you can run your app on a different device, you need to stop 
it running on the current one (in this case the emulator). To do this, 
choose Run —> “Stop ‘app’”, or click on the “Stop c app’” button in the 
toolbar. 



Clidk cm -this button in 
^-/Wroid Studio's toolbar 
to stop tbe app running 
on tbe durrerrl devide. 


5. Run your app on the physical device 

Run the app by choosing Run —> “Run ‘app’ 5 ’. Android Studio will ask you to 
choose which device you want to run your app on, so select your device from 
the list of available devices and click OK. Android Studio will install the app 
on your device and launch it. 


Wert s our physical devide. 


Here's our virtual devide 


-A 

A 


e 


Select Deployment Target 


Connected Devices 


B LGE Nexus 5X (Android 7.1.1, API 25 } 


B Nexus 5X API 25 (Android 7.L.L, API 25) 


Create New Virtual Device 


Don't see your device? 


Use same selection for future launches Cancel_| | OK 


And here's the app running 
on the physical device 

You should find that your app looks about the 
same as when you ran it through the emulator. 
You’ll probably find that your app installs and runs 
quicker too. 

Now that you know how to run the apps you create 
on your own device, you’re all set to test the latest 
changes to your app. 


N O W X A\ II 16:38 

My Messenger 


A little message 
Send Message 
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Test drive the app 


Try running the app using the emulator, and then using your own 
device. The results you get will depend on how many activities you have 
on each that support using the Send action with text data. 



(3 My Messenger 


A little message 
Send Message 


If you have one activity 

Clicking on the Send Message button will take 
you straight to that app. 


We only have one activity available 
on *tbe emulator that dan send JPj 
messages with te*t data, so when we 
dick on the Send Message button, 
Andv-oid stavts that activity- 


If you have wore than one activity 

Android displays a chooser and asks you to pick which one you want 
to use. It also asks you whether you want to use this activity just once 
or always. If you choose always, the next time you click on the Send 
Message button it uses the same activity by default. 


N 

O f Jt U 16:: 


* * My Messenger 






A little message 


Send Message 


Share with 

M Gmail 
B Any.do 
Q Hangouts 
O Messages 
IQ Copy to clipboard 
& Save to Drive 
B Keep 

& Add to Dropbox 
Android Beam 


Here's -the message- 

/ 


A little message 


© 



•O' ▼ A u 16:40 


I/Ve have lots o( suitable activities available 
on our physical device- We decided to use 
^the built-in Messages app. We selected the 
“always" option—great i-r we always want to 
use the same app, not so great i-r we want 
to use a di-Pferent one each time. 



< o □ 


This is a conversation with 12345 • Now 

+ A little message 

SMS 

> message messages messaged ^ 

1 2 3 4 5 6 7 8 9 | 

q w 


















let the user choose 


What if you ALWAYS want your users to choose an activity? 


You’ve just seen that if there’s more than one activity on 
your device that’s capable of receiving your intent, Android 
automatically asks you to choose which activity you want to use. It 
even asks you whether you want to use this activity all the time or 
just on this occasion. 

There’s just one problem with this default behavior: what if you 
want to guarantee that users can choose an activity every time they 
click on the Send Message button? If they’ve chosen the option to 
always use Gmail, for instance, they won’t be asked if they want to 
use Twitter next time. 

Fortunately, there’s a way around this. You can create a chooser 
that asks users to pick an activity without giving them the option to 
always use that activity. 

Iwtent.createChooserO displays a chooser dialog 

You can achieve this using the Intent. createChooser () 
method, which takes the intent you’ve already created and wraps it 
in a chooser dialog. When you use this method, the user isn’t given 
the option of choosing a default activity—they get asked to choose 
one every time. 


createChooserO allows 
you to specify a title lor 
the chooser dialog, and 
doesn’t give the user 
the option ol selecting 
an activity to use hy 
default. It also lets the 
user know if there are 
no matching activities 
hy displaying a message. 


You call the createChooser () method like this: 




This is *thc intent you treated C3v*licv-- 


via. 


Intent chosenlntent = Intent.createChooser(intent, "Send message 

The method takes two parameters: an intent and an optional ./ . , ,, * ., 

■ 01 r m u a- i • a mu T l Y OU ^ P ass m a ^'tle tte 

String title lor the chooser dialog window. Ihe Intent . iu l l j- i i ± 

parameter needs to describe the types of activity you want the ± r i. ^ ^ ,S ^ ^ 3 

chooser to display. You can use tire same intent we created earlier, ^ tkt 

as this specifies that we want to use ACTION_SEND with textual 
data. 


The createChooser () method returns a brand-new Intent. 
This is a new explicit intent that’s targeted at the activity chosen by 
the user. It includes any extra information supplied by the original 
intent, including any text. 

To start the activity the user chose, you need to call: 


startActivity(chosenlntent); 


Over the next couple of pages we’ll take a closer look at what 
happens when you call the createChooser () method. 
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What happens when you call createChooserl) 

Here’s what happens when you run the following two lines of code: 

Intent chosenlntent = Intent.createChooser(intent, "Send message via..."); 
startActivity(chosenlntent); 


v 


Specify action 
Create chooser 


O 


The createChooser() method 
gets called. 

The method includes an intent that 
specifies the action and MIME type 
that’s required. 



CreateMessageActivity 


createChooser() 
Intent 

E3— 

ACTION_SEND 
type: "text/plain" 
message: "Hi!" 


^orjo 


w 

Android 


Q 


Android checks which activities 
are able to receive the intent 
by looking at their intent 
filters. 

It matches on the actions, type of data, 
and categories they can support. 



o 


If more than one activity is 
able to receive the intent. 
Android displays an activity 
chooser dialog and asks the 
user which one to use. 

It doesn’t give the user the option 
of always using a particular activity, 
and it displays “Send message via...” 
in the title. 

If no activities are found, Android 
still displays the chooser but shows a 
message telling the user there are no 
apps that can perform the action. 



User 
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what happens 


The story continues... 


V 


Specify action 
Create chooser 


O 


When the user chooses 
which activity she wants to 
use. Android returns a new 
explicit intent describing 
the chosen activity. 

The new intent includes any 
extra information that was 
included in the original intent, 
such as any text. 




CreateMessageActivity 


Intent 


ChosenActivity 
message: "Hi!" 


0 

orfj 

vu 

Android 



User 


The activity asks 
Android to start the 
activity specified in 
the intent. 



CreateMessageActivity 


To: ChosenActivity 
message: "Hi!" 


\nj 

Android 


@ Android starts the 
activity specified by 
the intent, and then 
passes it the intent. 



ChosenActivity 
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Change the code to create a chooser 


multiple activities and intents 

Specify action 
Create chooser 



Let’s change the code so that the user gets asked which activity they want to 
use to send a message every time they click on the Send Message button. We’ll 
add a String resource to strings.xml for the chooser dialog title, and we’ll update 
the onSendMessage () method in CreateMessageActivity.java so that it calls the 
createChooser () method. 


Update $tring$.xml... 

We want the chooser dialog to have a title of “Send message via...”. 
Add a String called ’’chooser" to strings.xml, and give it the value 
Send message via... (make sure to save your changes): 


□ 

MyMessenger 

K3 

app/src/main 

4T3 


<string name="chooser">Send message via...</string> 

A~TKis will be displayed i» the dhoosev dialog 

...and update the owSewdMessageO method 


es ^ 

m 3 

values 


strings.xml 


We need to change the onSendMessage () method so that it 
retrieves the value of the chooser String resource in strings.xml , calls 
the createChooser () method, and then starts the activity the 
user chooses. Update your code as follows: 


□ 

MyMessenger 

HB 


app/src/main 

4n 


java 


MTS 


com.hfad.m^messenger 


£jet *the 

dhooser title. 


//Call onSendMessage() when the button is clicked 
public void onSendMessage(View view) { 

EditText messageView = (EditText)findViewByld(R.id.message); 

String messageText = messageView.getText().toString(); 

Intent intent = new Intent(Intent.ACTION_SEND); 
intent.setType("text/plain"); 

intent.putExtra(Intent.EXTRA_TEXT, messageText); 

String chooserTitle = getString (R. string, chooser) ; 

Delete Intent chosenlntent = Intent.createChooser(intent, chooserTitle); 

this line* —^ 

startActivity (chosenlntent) ; ^—- Start the activity Display the dhooser dialog. 

} that the user seledted. 


CreateMessage 

Activity.java 


The getString () method is used to get the value of a String resource. It takes 
one parameter, the ID of the resource (in our case, this is R. string. chooser): 

getString (R. string, chooser) ; ^ Y ou J 00 ^ m Rjava, you II -find dhooser 

in the inner dlass dalled string. 

Now that we’ve updated the app, let’s run the app to see our chooser in action. 
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test drive 

K 


Test drive the app 


Save your changes, then try running the app again on the device 
or the emulator. 


If you have one activity 

Clicking on the Send Message button will take 
you straight to that activity just like before. 


ThevVs no dhange here— 

Android £oirimues -fco -take 

you straijhi -to -the activity* 


If you have wore thaw owe activity 

Android displays a chooser, but this time it doesn’t ask us if we always 
want to use the same activity. It also displays the value of the chooser 
String resource in the title. 


O V X A U 17:02 


| My Messenger 


\/ 

V 


Specify action 
Create chooser 


i 

Q 4:15 


0 My Messenger 

i 



<- ,1 12345 j 

+i\ 



Here's -the thooser we treated 
with treateChooserO. It no longer 
gives us the option o-f using a 
partitular attivity every time- 
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If you have NO matching activities 


multiple activities and intents 

yj Specify action 
Create chooser 


If you have no activities on your device that are capable of sending 
messages, the createChooser () method lets you know by 
displaying a message. 


l-f y°<* 'want -to replicate this tor yourselt, try^^ 
ruling the app in the emulator, and disable 
the built-in Messenger app that's on there- 



tlieret^re no 

Dumb Questions 


n So I can run my apps in the emulator or on a physical 
device. Which is best? 


Each one has its pros and cons. 


If you run apps on your physical device, they tend to load a lot 
quicker than using the emulator. This approach is also useful if 
you’re writing code that interacts with the device hardware. 


n You mentioned that an activity’s intent filter can specify 
a category as well as an action. What’s the difference between 
the two? 


An action specifies what an activity can do, and the category 
gives extra detail. We’ve not gone into details about adding 
categories because you don’t often need to specify a category 
when you create an intent. 


The emulator allows you to run apps against many different versions 
of Android, screen resolutions, and device specifications. It saves you 
from buying lots of different devices. The key thing is to make sure 
you test your apps thoroughly using a mixture of the emulator and 
physical devices before releasing them to a wider audience. 



Should I use implicit or explicit intents? 


It comes down to whether you need Android to use a specific 
activity to perform your action, or whether you just want the action 
done. As an example, suppose you wanted to send an email. If you 
don’t care which email app the user uses to send it, just as long as 
the email gets sent, you’d use an implicit intent. On the other hand, 
if you needed to pass an intent to a particular activity in your app, 
you’d need to use an explicit intent to explicitly say which activity 
needs to receive the intent. 


You say that the createChooser () method 
displays a message in the chooser if there are no activities 
that can handle the intent. What if I’d instead used the 
default Android chooser and passed an implicit intent to 
startActivity()? 

If the startActivity () method is given 
an intent where there are no matching activities, an 
ActivityNotFoundException is thrown. You can 
check whether any activities on the device are able to receive the 
intent by calling the intent’s resolveActivity () method 
and checking its return value. If its return value is null, no activities 
on the device are able to receive the intent, so you shouldn’t call 
startActivity(). 
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toolbox 



intents to your toolbox. 


You’ve got Chapter 3 under 
your belt and now you’ve 
added multi-activity apps and 


Your Android Toolbox 


Yow ta* download 
i he -Pull code &>v 
i he c\\ after Prom 


V»ttfs://tirJyuv-|.6°wi/ 

ttcadPiiv-stA^dv-o‘id. 



BULLET POINTS 


■ A task is two or more activities chained together. 

■ The <Edi tText > element defines an editable text field for entering text. It inherits from the Android view class. 

■ You can add a new activity in Android Studio by choosing File —> New... —> Activity. 

■ Each activity you create must have an entry in AndroidManifest.xml. 

■ An intent is a type of message that Android components use to communicate with one another. 

■ An explicit intent specifies the component the intent is targeted at. You create an explicit intent using 

Intent intent = new Intent (this. Target.class);. 

■ To start an activity, call startActivity (intent) . If no activities are found, it throws an 

ActivityNotFoundException. 

■ Use the putExtra () method to add extra information to an intent. 

■ Use the getintent () method to retrieve the intent that started the activity. 

■ Use the get*Extra () methods to retrieve extra information associated with the intent. 
getStringExtra () retrieves a String, getintExtra () retrieves an int, and so on. 

■ An activity action describes a standard operational action an activity can perform. For example, to send a message, 

use Intent. ACTION_SEND. 

■ To create an implicit intent that specifies an action, use intent intent = new Intent (action) ;. 

■ To describe the type of data in an intent, use the setType () method. 

■ Android resolves intents based on the named component, action, type of data, and categories specified in the 

intent. It compares the contents of the intent with the intent filters in each app’s AndroidManifest.xml. An activity 

must have a category of default if it is to receive an implicit intent. 

■ The createChooser () method allows you to override the default Android activity chooser dialog. It lets you 
specify a title for the dialog, and doesn’t give the user the option of setting a default activity. If no activities can 
receive the intent it is passed, it displays a message. The createChooser () method returns an intent. 

■ You retrieve the value of a String resource using getstring (R. string, stringname) ; . 
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4 the cictiVtty Mecycle 


^ Being an Activity + 



Activities form the foundation of every Android app. 

So far you’ve seen how to create activities, and made one activity start another using an 
intent. But what’s really going on beneath the hood? In this chapter, we’re going to dig 
a little deeper into the activity lifecycle. What happens when an activity is created and 
destroyed? Which methods get called when an activity is made visible and appears in 
the foreground, and which get called when the activity loses the focus and is hidden? 
And how do you save and restore your activity’s state? Read on to find out. 


this is a new chapter 
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how activities work 


How do activities really work? 

So far you’ve seen how to create apps that interact with the user, 
and apps that use multiple activities to perform tasks. Now that 
you have these core skills under your belt, it’s time to take a deeper 
look at how activities actually work. Here’s a recap of what you 
know so far, with a few extra details thrown in. 


An app is a collection of activities, layouts, and other resources. 

One of these activities is the main activity for the app. 


fcacM app l^as a main activity, ^ 
as spedffied in the -file 

/\ndv-oidMani*fes*t><«mL 

-o 

Main Activity 

App 

O 

Activity 


o 

Activity 

o 

Activity 


o 


By default, each app runs within its own process. 

This helps keep your apps safe and secure. You can read more about this in Appendix 
III (which covers the Android runtime, a.k.a. ART) at the back of this book. 


Process 1 Process 2 
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the activity lifecycle 


o 


Your app can start an activity in another application by passing an 
intent with startActivity(). 

The Android system knows about all the device’s installed apps and their activities, 
and uses the intent to start the correct activity. 



o 


When an activity needs to start. Android checks whether there's 
already a process for that app. 

If one exists, Android runs the activity in that process. If one doesn’t exist, 
Android creates one. 



O 


When Android starts an activity, it calls its onCreate() method. 

onCreate() is always run whenever an activity gets created. 



But there are still lots of things we don’t yet know about how activities 
function. How long does an activity live for? What happens when 
your activity disappears from the screen? Is it still running? Is it still 
in memory? And what happens if your app gets interrupted by an 
incoming phone call? We want to be able to control the behavior of 
our activities in a whole range of dfferent circumstances, but how? 


*PP2 


O 

Activity 
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The Stopwatch app 

In this chapter, we’re going to take a closer look at how activities 
work under the hood, common ways in which your apps can break, 
and how you can fix them using the activity lifecycle methods. 
We’re going to explore the lifecycle methods using a simple 
Stopwatch app as an example. 

The Stopwatch app consists of a single activity and a single layout. 
The layout includes a text view showing you how much time has 
passed, a Start button that starts the stopwatch, a Stop button that 
stops it, and a Reset button that resets the timer value to 0. 


Of 1 U 16:57 


Stopwatch 



This is *the number 
of sedonds. 

I/Vbch you dlidk this button, 
the seconds begin to indrement 


When you dlidk this button, 
the seconds stop indrementing. 


When you dlidk this button, the 
sedonds tally goes badk to 0 . 


Create a new project for the Stopwatch app 

You have enough experience under your belt to build the app 
without much guidance from us. We’re going to give you just enough 
code so you can build the app yourself, and then you can see what 
happens when you try to run it. 

Start off by creating a new Android project for an application 
named “Stopwatch” with a company domain of “hfad.com”, making 
the package name com. hf ad. stopwatch. The minimum 
SDK should be API 19 so it can run on most devices. You’ll need 
an empty activity called “StopwatchActivity” and a layout called 
“activity_stopwatch”. Make sure you uncheck the Backwards 
Compatibility (AppCompat) checkbox. 



<Layou-fc> 

</Layou-t> ] 

activity_stopwatch.xml 


The is domposed 
of one adiiviiy and 
one layout 


o 


StopwatchActivity .java 
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Add String resources 


We’re going to use three String values in our stopwatch layout, one 
for the text value of each button. These values are String resources, 
so they need to be added to strings.xml. Add the String values below 
to your version of strings, xml: 


□ 

Stopwatch 

413 


<string name="start">Start</string> / ^ ^ -these 
<string name="stop">Stop</string> V y- e souvdes 

<string name="reset">Reset</string>y m ouV - layout 


app/src/main 

LQ 


qn 


Next, let’s update the code for our layout. 


values 



strings.xml 


Update the stopwatch layout code 

Here’s the XML for the layout. It describes a single text view 
that’s used to display the timer, and three buttons to control the 
stopwatch. Replace the XML currently in activity_stopwatch.xml 
with the XML shown here: 


<?xml version="l.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 
android:padding="16dp" 
tools:context=".StopwatchActivity"> 


□ 

Stopwatch 


4H 

app/src/main 

4T) 


We II use *tli*is -te%*t view -to 
display -the number o-C seconds. 


<TextView 

android:id="@+id/time_view" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 

android:textAppearance="@android:style/TextAppearance.Large" 

android:textSize="56sp" /> ^_ ' , , 

" -These attributes make -the 


Co _ 

4H3 

layout 


stopwatch -timer ni£e and big. 


activity_ 
stopwatch.xml 


The layou-t 

£ode £ontinues 
over -the page. 
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activity_stopwatch.xml 


The layout code (continued) 


<Button 

android: 

android: 

android: 

android: 

android: 

android: 

android: 

<Button 

android: 

android: 

android: 

android: 

android: 

android: 

android: 


id="@+id/start_button" 4 
1ayout_width="wrap_content" 
layout_height="wrap_content" 
layout_gravity="center_horizontal" 
layout_marginTop= M 20dp M 
onClick="onClickStart" ^ 
text= M @string/start M /> 


This dode is (or *thc Siav-t button- 


Men it gets clicked, the 
Start button calls the 
onClickStartO method- 


a 

Stopwatch 

HD 

app/sre/main 

L a 


This is (or "the S*toP button- 

id="@+id/stop_button n *C 

1ayout_width="wrap_content" 
layout_height="wrap_content" 
layout_gravity="center_horizontal" 
layout_marginTop= M 8dp" 

onClick="onClickStop" — Men it gets clicked, the 
text="@string/stop" /> 


S-fcop button ealls the 
ohCli^kStopO method. 


<Button 

android: id=" @+id/reset_button"<^—— This is -for the Reset button 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="8dp" 
android:onClick="onClickReset 
android:text="@string/reset" /> 

</LinearLayout> 


Men it gets clicked, the 
Reset button calls the 
onClickResetO method- 


Co _ 

43 

layout 


activity_ 
stopwatch.xml 


r 


T 

Tjq this! 


The layout is now done! Next, let’s move on to the activity. 


Make sure you update 
the layout and strings - 
xml in your app before 
continuing. 
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How the activity code will work 

The layout defines three buttons that we’ll use to control 
the stopwatch. Each button uses its onClick attribute 
to specify which method in the activity should run when 
the button is clicked. When the Start button is clicked, the 
onClickStart () method gets called, when the Stop 
button is clicked the onClickStop () method gets called, 
and when the Reset button is clicked the onClickReset () 
method gets called. We’ll use these methods to start, stop, and 
reset the stopwatch. 


N O ▼ y A U 16:57 

£ Stopwatch 


0 



Start 




When you dlidk 

ohCkkS-tav-tO 


this button, the 
method is Balled- 


Stop ^ 


Reset 



When you wliwk this button, the 
onCli^kStofO method is tailed- 

When you dlidk this button, the 
onClidkResetO method is tailed. 


We’ll update the stopwatch using a method we’ll create 
called runTimer () . The runTimer () method will run 
code every second to check whether the stopwatch is running, 
and, if it is, increment the number of seconds and display the 
number of seconds in the text view. 

To help us with this, we’ll use two private variables to record 
the state of the stopwatch. We’ll use an int called seconds 
to track how many seconds have passed since the stopwatch 
started running, and a boolean called running to record 
whether the stopwatch is currently running. 

We’ll start by writing the code for the buttons, and then we’ll 
look at the runTimer () method. 


runTimerQ 



Activity 
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buttons 


Add code for the buttons 

When the user clicks on the Start button, we’ll set the running 
variable to true so that the stopwatch will start. When the 
user clicks on the Stop button, we’ll set running to false so 
that the stopwatch stops running. If the user clicks on the Reset 
button, we’ll set running to false and seconds to 0 so that 
the stopwatch is reset and stops running. 

To do all that, replace the contents of StopwatchActivity.java with 
the code below: 



■^> running=true 
running=false 

running=false 

seconds=0 


package com.hfad.stopwatch; 


import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 


Make sure your adiiviiy 
expends -tke Adiiviiy dlass. 

public class StopwatchActivity extends Activity { 


□ 

Stopwatch 


private int seconds = 
private boolean running 


0 r) Use ike seconds and running 

r variables io redord ike number o£ 
' sedonds passed and wkeiker ike 
siofwaidk is running. 


@Override 

protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_stopwatch); 

} 


HU 

app/sre/main 


java 




com. hfad .stopwatch 

L @ 

Stopwatch 

Activity.java 


//Start the stopwatch running when the Start button is clicked, 
public void onClickStart (View view) { < <\els tailed when the 

running = true; ^ is ditked- 


//Stop the stopwatch running when the Stop button is clicked, 
public void onClickStop (View view) { Tkis gets dalled v/ken ike 

running = false;^^ ^ is tlitked- 


//Reset the stopwatch when the Reset button is clicked, 
public void onClickReset (View view) { ^ called 

seconds = a»d wk JV 

'^_J> sedonds -to O. bi*iW is dlidked 
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The runTimer!) method 


The next thing we need to do is create the runTimer () method. 
This method will get a reference to the text view in the layout; format 
the contents of the seconds variable into hours, minutes, and 
seconds; and then display the results in the text view. If the running 
variable is set to true, it will increment the seconds variable. 


The code for the runTimer () method is below. Weil add it to 
StopwatchActivity.java in a few pages: 


private void runTimer() { 

final TextView timeView = 



6\c l “the view. 


(TextView) findViewByld(R. id. time_view) ; 


We've le-Pi 
ou-t a bi-t o( 
Code here- 
Well look at 
it oy\ the 
ne*t page. 




int hours = seconds/3600; 
int minutes = (seconds%3600)/60; 
int secs = seconds%60; 

String time = String.format(Locale.getDefault(), 

"%d:%02d:%02d", hours, minutes, secs); 

timeView. setText (time) ;, . . 

^ Set the te*t view te*t __ 

if (running) { 


Format the seconds into 
hours, minutes, and seconds. 
This is plain Java dode- 


seconds++; , s i^ement 

the seconds variable. 


Stopwatch 

4^3 

app/sre/main 

KU 


We need this code to keep looping so that it increments the seconds 
variable and updates the text view every second. We need to do this in 
such a way that we don’t block the main Android thread. 

In non-Android Java programs, you can perform tasks like this 
using a background thread. In Androidville, that approach 
won’t work—only the main Android thread can update the 
user interface, and if any other thread tries to do so, you get a 
CalledFromWrongThreadException. 


java 




com, hfad. stopwatch 


Stopwatch 

Activity.java 


The solution is to use a Handler. We’ll look at this technique on the 
next page. 
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Handlers allow you to schedule code 

A Handler is an Android class you can use to schedule code that 
should be run at some point in the future. You can also use it to post 
code that needs to run on a different thread than the main Android 
thread. In our case, we’re going to use a Handler to schedule the 
stopwatch code to run every second. 

To use the Handler, you wrap the code you wish to schedule in 
a Runnable object, and then use the Handler post () and 
postDelayed() methods to specify when you want the code to run. 

Let’s take a closer look at these mehods. 

The postO method 

The post () method posts code that needs to be run as soon as 
possible (which is usually almost immediately). This method takes 
one parameter, an object of type Runnable. A Runnable object in 
Androidville is just like a Runnable in plain old Java: a job you want 
to run. You put the code you want to run in the Runnable’s run () 
method, and the Handler will make sure the code is run as soon as 
possible. Here’s what the method looks like: 

final Handler handler = new Handler (); 

handler .post (Runnable) —y^ u p u *t Code you wan*t *to run in -the Runnables runO method- 

The postPelayedO method 

The postDelayed() method works in a similar way to the post () 
method except that you use it to post code that should be run in 
the future. The post Delayed ( ) method takes two parameters: a 
Runnable and a long. The Runnable contains the code you want 
to run in its run () method, and the long specifies the number of 
milliseconds you wish to delay the code by. The code will run as soon 
as possible after the delay. Here’s what the method looks like: 

final Handler handler = new Handler (); 

handler.postDelayed(Runnable, long) ; Use -this method -to delay running Lode 

by a speei-Pied number or milliseconds. 

On the next page, we’ll use these methods to update the stopwatch 
every second. 
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The full runTimer!) code 

To update the stopwatch, we’re going to repeatedly schedule code using 
the Handler with a delay of 1 second each time. Each time the code runs, 
we’ll increment the seconds variable and update the text view. 

Here’s the full code for the runTimer () method, which we’ll add to 
StopwatchActivity.java in a couple of pages: 

private void runTimer() { 

final TextView timeView = (TextView)findViewByld(R.id.time_view); 

final Handler handler = new Handler () ; ^—Qctdkt 3 new Handler. 

handler post (new Runnable() { ^ post0 ^ ^ - m a * ew RwwaUe . The ?ost0 

@Override method processes Code without a delay, so the Code m the 

public void run () { Runnable will run almost immediately. 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; n 

Tbe Runnable runt/ 

rwe*tbod don*tains *tbe Code 
you wan*t *to run—in our 

"%d: %02d: %02d", hours, minutes, secs); tdse, *tbe Code bo update 

timeView. setText (time) ; *tbe 'te'rtt view, 

if (running) { 
seconds++; 

} 

handler .postDelayed( this, 1000) ; Pos£ ihe Code in -the Runnable -fco be run a^ain 
} a-fter a delay ot 1,000 milliseconds. As this line 

ot Code is included in the Runnable runO method, 
it will keep getting called- 


int secs = seconds% 60 ; 

String time = String.format(Locale.getDefault(), 


e- 


Using the post () and postDelayed () methods in this way means 
that the code will run as soon as possible after the required delay, which 
in practice means almost immediately. While this means the code will lag 
slightly over time, it’s accurate enough for the purposes of exploring the 
lifecycle methods in this chapter. 

We want the runTimer () method to start running when 
StopwatchActivity gets created, so we’ll call it in the activity 
onCreate () method: 

protected void onCreate(Bundle savedlnstanceState) { 

runTimer(); 


We’ll show you the full code for StopwatchActivity on the next page. 
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The full StopwatchActivity code 

Here’s the full code for StopwatchActivity.java. Update your code to match 
our changes below. 


package com.hfad.stopwatch; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 

import java.util.Locale; 
import android.os.Handler; 
import android.widget.TextView; 


Wert using -these e*tra classes 
so we need to import "them. 


□ 

Stopwatch 

HID 

app/src/main 

MU 

java_ 

LQ 

com.hfad.stopwatch 


public class StopwatchActivity extends Activity { 
//Number of seconds displayed on the stopwatch, 
private int seconds = 0; 

//Is the stopwatch running? 
private boolean running; 


Use the seconds and running 
variables -to record “the number of 
seconds passed and whether the 
stopwatch is running. 


@Override 

protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_stopwatch); 

runTimer();^ 


- 1/VeVe using a separate method to 
update the stopwatch- 1/VeVe starting it 
when the activity is treated- 


Stopwatch 

Activity.java 


//Start the stopwatch running when the Start button is clicked. 

public void onClickStart (View view) { < \ This gels tailed *her, the 

running = true; ^ ^ ^ 


Start button is tlitked. 


//Stop the stopwatch running when the Stop button is clicked. 

public void onClickStop (View view) { - This gets tailed when the 

running = false; , , Stop button is tlitked- 

VStop the stopwatth. 
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The activity code (continued) 


//Reset the stopwatch when the Reset button is clicked, 
public void onClickReset(View view) 
running = false; . 

^ S-top the 


seconds = 0 


' T"—stopwatch a^d set 
the seconds to 0- 


This gets tailed 
when *the Reset 
button is tlitked- 


□ 

Stopwatch 


Ha 

app/sre/main 


java 


HD 


com. hfad. stopwatch 

L @ 

Stopwatch 

Activity.java 


//Sets the number of seconds on the timer. £jet the text view 

private void runTimer() { 

final TextView timeView = (TextView) findViewByld (R. id. time_view) 
final Handler handler = new Handler(); 
handler. post (new Runnable () { |/ se a dawdler to post Code- 

@Override 

public void run() { 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; 

int secs = seconds%60; 

String time = String, format (Locale. getDefault() , Format the seconds 

"%d:%02d:%02d M , hours, minutes, secs) into hours, minutes, 

timeView. setText (time) ; iKe ^*t view te*t 

if (running) { 

seconds++ ; |-f running is true, increment 

} the seconds variable- 

handler .postDelayed( this, 1000) ; 4^ post the Code again with a delay o£ I second 


} 


} 


}); 


Let’s look at what happens when the code runs. 



Make sure you update 
your activity code to 
reflect these changes. 
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what happens 


What happens when you run the app 


O 


The user decides she wants to run the app. 

On her device, she clicks on the app’s icon. 



© An intent is constructed to start this activity using startActivity(intent). 

The AndroidManifest.xml file for the app specifies which activity to use as the launch 
activity. 



AndroidManifest.xml Android 


© 


Android checks to see whether there's already a process running 
for the app, and if not, creates a new process. 

It then creates a new activity object—in this case, for StopwatchActivity. 


Process 1 
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The story continues 


O 


The onCreate() method in the activity gets called. 

The method includes a call to setContentView (), specifying a layout, and then 
starts the stopwatch with runTimer () . 


© 


runTimerQ 



S+opwa+chAc+ivi+y Layout 


When the onCreate() method finishes, the layout gets displayed on the 
device. 

The runTimer () method uses the seconds variable to determine what text to display in 
the text view, and uses the running variable to determine whether to increment the number 
of seconds. As running is initially false, the number of seconds isn’t incremented. 



Q.: Why does Android run each app inside a separate 
process? 


% Couldn’t I just write a loop in onCreate () to keep 
updating the timer? 


For security and stability. This approach prevents one app 
from accessing the data of another. It also means if one app 
crashes, it won’t take others down with it. 


% Why have an onCreate () method in our activity? 
Why not just put that code inside a constructor? 


Android needs to set up the environment for the activity after 
it’s constructed. Once the environment is ready, Android calls 
onCreate (). That’s why code to set up the screen goes 
inside onCreate () instead of a constructor. 


No, onCreate () needs to finish before the screen will 
appear. An endless loop would prevent that from happening. 


% runTimer () looks really complicated. Do I really 
need to do all this? 


It’s a little complex, but whenever you need to post code that 
runs in a loop, the code will look similar to runTimer (). 
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test drive 

Test drive the app 

When we run the app in the emulator, the app works great. We 
can start, stop, and reset the stopwatch without any problems at 
all—the app works just as you’d expect. 


N 

O + 'A 11 16:56 1 

* * Stopwatch 



0:00:07 


These buttons work as you d e*pe£t The 
Start button starts the stopwatch, the 
Stop button stops it, and the Reset 
button sets the stopv/atdh baek to O. 



Start 


Stop 


Put there's just one problem... 


Reset 


When we ran the app on a physical device, the app worked OK 
until someone rotated the device. When the device was rotated, 
the stopwatch set itself back to 0. 



N 

O T A U 16:57 | 

’' Stopwatch 



0:00:14 


Start 

Stop 

Reset 




Tbe s-fcopwat^h was running, bu^t rese^t -to 
O when -the device was ro-taied- 




N 


O W 'A U 16:58 

{* *; Stopwatch 


0:00:00 

l D 


Start 

1 o 


Stop 



Reset 



7 


In Androidville, it’s surprisingly common for apps to break when 
you rotate the device. Before we fix the problem, let’s take a closer 
look at what caused it. 
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What just happened? 


So why did the app break when the user rotated the screen? 
Let’s take a closer look at what really happened. 


o 


© 


O 


The user starts the app, and clicks on the Start button to set the 
stopwatch going. 

The runTimer () method starts incrementing the number of seconds displayed in 
the time_view text view using the seconds and running variables. 



The user rotates the device. 

Android sees that the screen orientation and screen size has changed, and it destroys 
the activity, including any variables used by the runTimer () method. 



Stopwatch Activity is then recreated. 

The onCreate () method runs again, and the runTimer () method gets called. 
As the activity has been recreated, the seconds and running variables are set to 
their default values. 



is because -the activity was 
des*b-oyed a*\d vedveaied 
when *tbc devide was roiaitd- 
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device configurations 


Rotating the screen changes the device configuration 


When Android runs your app and starts an activity, it takes 
into account the device configuration. By this we mean the 
configuration of the physical device (such as the screen size, screen 
orientation, and whether there’s a keyboard attached) and also 
configuration options specified by the user (such as the locale). 

Android needs to know what the device configuration is when 
it starts an activity because the configuration can impact what 
resources are needed for the application. A different layout might 
need to be used if the device screen is landscape rather than portrait, 
for instance, and a different set of String values might need to be 
used if the locale is France. 



/Wroid apps da* 
dorrtam multiple 
vesouirde -files m the 
app/svd/mam/res 
-folder. For mstande, i-f 
the devide lodale is set 
to Frande, Android 
will use the strm^s-^ml 
-file m the values-fr 
-folder. 


The device 

configuration includes 
options specified 
hy the user (such 
as the locale), and 
options relating to the 
physical device (such 
as the orientation and 
screen size). A change 
to any of these options 
results in the activity 
being destroyed and 
then recreated. 


When the device configuration changes, anything that displays a user 
interface needs to be updated to match the new configuration. If you 
rotate your device, Android spots that the screen orientation and 
screen size have changed, and classes this as a change to the device 
configuration. It destroys the current activity, and then recreates it so 
that resources appropriate to the new configuration get picked up. 


136 Chapter 4 







the activity lifecycle 


The states of an activity 

When Android creates and destroys an activity, the activity moves 
from being launched to running to being destroyed. 

The main state of an activity is when it’s running or active. An 
activity is running when it’s in the foreground of the screen, it has 
the focus, and the user can interact with it. The activity spends most 
of its life in this state. An activity starts running after it has been 
launched, and at the end of its life, the activity is destroyed. 




Activity running J^y^ activity sper>£ u 

most of i-ts li-Pe hev-e. 


At this pomi, youv- 

Activity destroyed activity no Ujev 

Crists. 


An activity is running 
when it’s in the 
foreground ol the screen. 


When an activity moves from being launched to being destroyed, 
it triggers key activity lifecycle methods: the onCreate () and 
onDestroyO methods. These are lifecycle methods that your 
activity inherits, and which you can override if necessary. 

The onCreate () method gets called immediately after your 
activity is launched. This method is where you do all your normal 
activity setup such as calling setContentView () . You should 
always override this method. If you don’t override it, you won’t be 
able to tell Android what layout your activity should use. 

The onDestroyO method is the final call you get before the 
activity is destroyed. There are a number of situations in which 
an activity can get destroyed—for example, if it’s been told to 
finish, if the activity is being recreated due to a change in device 
configuration, or if Android has decided to destroy the activity in 
order to save space. 

We’ll take a closer look at how these methods fit into the activity 
states on the next page. 


onCreateO gets called 
when the activity is first 
created, and it’s where 
you do your normal 
activity setup. 


onDestroyO gets 
just tefore your 
gets destroyed. 


called 

activity 
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birth to death 


The activity lifecycle: from create to destroy 

Here’s an overview of the activity lifecycle from birth to death. As 
you’ll see later in the chapter, we’ve left out some of the details, 
but at this point we’re just focusing on the onCreate () and 
onDestroyO methods. 




Q The activity gets launched. 

The activity object is created and its constructor 
is run. 


© 


The onCreate() method runs immediately 
after the activity is launched. 

The onCreate () method is where any 
initialization code should go, as this method 
always gets called after the activity has launched 
but before it starts running. 


© 


An activity is running when it's visible in 
the foreground and the user can interact 
with it. 

This is where an activity spends most of its life. 


© 


The onDestroyO method runs immediately 
before the activity is destroyed. 

The onDestroyO method enables you to 
perform any final cleanup such as freeing up 
resources. 


(^ActMty destroyed^) 


After the onDestroyO method has run, 
the activity is destroyed. 

The activity ceases to exist. 


The onCreate () and onDestroy () methods are two of the 
activity lifecycle methods. So where do these methods come from? 


|£ your device is extremely low o* 
memory, OKpes-broyO mi^t not <$ti 
tailed be-Core the activity is destroyed- 
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Your activity inherits the lifecycle methods 

As you saw earlier in the book, your activity extends the android. 
app . Activity class. It’s this class that gives your activity access to the 
Android lifecycle methods. Here’s a diagram showing the class hierarchy: 


Context 


startActivity(lntent) 


5 


ContextWrapper 


startActivity(lntent) 


5 


ContextThemeWrapper 


startActivity(lntent) 


5 


Activity 



onCreate(Bundle) 
onStartO 
onRestartO 
onResumeO 
onPauseO 
onStopO 
onDestroyO 
onSavelnstanceStateO "|j 
startActivity(lntent) / 
findViewByld(lnt) V 
setContentView(View) 


Context abstract class 

(android.content.Context) 

An interface to global information about the application environment. 
Allows access to application resources, classes, and operations. 

ContextWrapper class 

(android.content.ContextWrapper) 

A proxy implementation for the Context. 


ContextThemeWrapper class 

(android.view.ContextThemeWrapper) 

Allows you to modify the theme from what’s in the 
ContextWrapper. 

Activity class 

(android.app.Activity) 

The Activity class implements default versions of the lifecycle 
methods. It also defines methods such as f indViewByld (Int) 
and setContentView(View). 

These are the activity lifecycle methods, 
you II find out ".ore about them through 
the rest of the Chapter. 


These aren't lifecycle methods, but 
they're still very useful- You ve already 
used most of them in earlier chapters. 


_i_ 

Your Activity 

onCreate(Bundle) 

yourMethodQ 


YourActivity class 

(com.hfad.foo) 

Most of the behavior of your activity is handled by superclass methods 
your activity inherits. All you do is override the methods you need. 


Now that you know more about the activity lifecycle methods, 
let’s see how you deal with device configuration changes. 
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saving state 


Save the current state... 


As you saw, our app went wrong when the user rotated the screen. The activity 
was destroyed and recreated, which meant that local variables used by the activity 
were lost. So how do we get around this issue? 

The best way of dealing with configuration changes is to save the current state of 
the activity, and then reinstate it in the onCreate () method of the activity. 

To save the activity’s current state, you need to implement the 
onSavelnstanceState () method. This method gets called before the 
activity gets destroyed, which means you get an opportunity to save any values 
you want to retain before they get lost. 

The onSavelnstanceState () method takes one parameter, a Bundle. A 
Bundle allows you to gather together different types of data into a single object: 

public void onSavelnstanceState(Bundle savedlnstanceState) { 


( Activtt 


Activity launched 



onCreateQ 


} 


The onCreate () method gets passed the Bundle as a 
parameter. This means that if you add the values of the running 
and seconds variables to the Bundle, the onCreate () 
method will be able to pick them up when the activity gets 
recreated. To do this, you use Bundle methods to add name/ 
value pairs to the Bundle. These methods take the form: 

bundle.put*("name M , value) 



Activity running 



The on£ave|nstan£e£tateO 
method gets ealled ^ 

beW onDestroyO. onSavelnstanceState() 

i 


hDes-troyO 
It gives you a 
£han£e to save your 
a^tivity s state 
be-Pov-e the activity 
is destroyed 


on Destroy () 


i 


where bundle is the name of the Bundle, * is the type of value you want to 
save, and name and value are the name and value of the data. As an example, 
to add the seconds int value to the Bundle, you’d use: 

bundle.putlnt("seconds", seconds); 



Activity destroyed 



You can save multiple name/value pairs of data to the Bundle. 

Here’s our onSavelnstanceState () method in full (we’ll add it to 
StopwatchActivity.java a couple of pages ahead): 

@Override 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putlnt("seconds", seconds);^ 
savedlnstanceState.putBoolean("running", running); \ 


} 


Once you’ve saved variable values to the Bundle, you can use them 
in our onCreate () method. 


■ 

Stopwatch 

4H 

app/sre/main 

HB 


java 


Save the values of the 
seconds and running 
variables to the Bundle- 


UD 


com, hfad. stopw atch 


Stopwatch 

Activity.java 
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...then restore the state in onCreateO 

As we said earlier, the onCreate () method takes one parameter, a 
Bundle. If the activity’s being created from scratch, this parameter 
will be null. If, however, the activity’s being recreated and there’s been 
a prior call to onSavelnstanceState (), the Bundle object 
used by onSavelnstanceState () will get passed to the activity: 

protected void onCreate(Bundle savedlnstanceState) { 


You can get values from Bundle by using methods of the form: 


bundle.get*("name") 



Instead o( use |rrt, String and so on, to 
spedi*Cy the type o-f data you want to $et- 


where bundle is the name of the Bundle, * is the type of value 
you want to get, and name is the name of the name/value pair you 
specified on the previous page. As an example, to get the seconds 
value from the Bundle, you’d use: 


□ 

Stopwatch 

app/sre/main 

4B 

java„ 

MU 

com.hfad.stopwatch 



Stopwatch 

Activity.java 


int seconds = bundle.getlnt("seconds"); 


Putting all of this together, here’s what our onCreate () method 
now looks like (we’ll add this to StopwatchActivity.java on the next page): 


protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 

setContentView (R. layout. activity_stopwatch) ; Retrieve *thc values o-f 

if (savedlnstanceState != null) { -the seconds and running 

seconds = savedlnstanceState. getlnt ( "seconds" 77 ^variables -(Vom “the Bundle 
running = savedlnstanceState.getBoolean("running"); \ 

} 

runTimer(); 

} 


We’ll look at the full code to save and restore 
StopwatchActivity’s state on the next page. 
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The updated StopwatchActivity code 

We’ve updated our StopwatchActivity code so that 
if the user rotates the device, its state gets saved via the 
onSavelnstanceState () method, and restored via the 
onCreate () method. Update your version of StopwatchActivity.java 
to include our changes (below in bold): 


public class StopwatchActivity extends Activity { 
//Number of seconds displayed on the stopwatch, 
private int seconds = 0; 

//Is the stopwatch running? 
private boolean running; 


□ 

Stopwatch 

4a 

app/src/main 

HU 


java 


m 


com. hfad. stopwatch 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_stopwatch); 

if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds") 
running = savedlnstanceState.getBoolean("running") 

} 

runTimer(); 

j Save the state o( the 

variables m the activity s 
on£ave|nstan£e£tateO method- 

@Override 

public void onSavelnstanceState(Bundle savedlnstanceState) 
savedlnstanceState.putlnt("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); 


} 


1/Ve ve le-ft out some o-f the activity 
Code, as we don*t need to ehan^e it- 


Stopwatch 

Activity.java 


Restore the activity s 
state by getting values 
•fvom the Bundle- 


So how does this work in practice? 
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What happens when you run the app 

Q The user starts the app, and clicks on the Start button to set the 
stopwatch going. 

The runTimer () method starts incrementing the number of seconds displayed in 
the time view text view. 



© 


The user rotates the device. 

Android views this as a configuration change, and gets ready to destroy the activity. 
Before the activity is destroyed, onSavelnstanceState () gets called. The 
onSavelnstanceState () method saves the seconds and running values to 



o 


bundle 
"seconds'-8 
"running"=true 
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what happens, continued 


The story continues 


O 


9 


Android destroys the activity, and then recreates it. 

The onCreate () method gets called, and the Bundle gets passed to it. 



The Bundle contains the values of the seconds and running variables as 
they were before the activity was destroyed. 

Code in the onCreate () method sets the current variables to the values in the Bundle. 



"seconds"=8 

“running"=true 

^ The runTimer() method gets called, and the timer picks up where it 
left off. 

The running stopwatch gets displayed on the device 
and continues to increment. 
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K- 


Test drive the app 


Make the changes to your activity code, then run the app. When 
you click on the Start button, the timer starts, and it continues 
when you rotate the device. 


O ▼ A U 17:05 


I Stopwatch 


0:00:08 






When we rotate our devide, 
•the stopwatdli keeps ok $01*5. 


Start 

Stop 

Reset 




Of U 17:06 

f ’ Stopwatch 


0 : 00:12 

1 ° 


Start 

l ° 


Stop 



Reset 




O: Why does Android want to 
recreate an activity just because I 
rotated the screen? 

The onCreate () method is 
normally used to set up the screen. If your 
code in onCreate () depended upon 
the screen configuration (for example, if 
you had different layouts for landscape 
and portrait), then you would want 
onCreate () to be called every time 
the configuration changed. Also, if the user 
changed their locale, you might want to 
recreate the Ul in the local language. 


tliereiare no 

Dumb Questions 


Q; 


Why doesn’t Android 
automatically store every instance 
variable automatically? Why do I have 
to write all of that code myself? 

You might not want every instance 
variable stored. For example, you might 
have a variable that stores the current 
screen width. You would want that 
variable to be recalculated the next time 
onCreate () is called. 


O: Is a Bundle some sort of Java 
map? 

No, but it’s designed to work like 
a j ava.util.Map. A Bundle 
has additional abilities compared to a 
Map. Bundles can be sent between 
processes, for example. That’s really 
useful, because it allows the Android OS to 
stay in touch with the state of an activity. 
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stop and start 


There's more to an activity's life than create and destroy 

So far we’ve looked at the create and destroy parts of the activity 
lifecycle (and a little bit in between), and you’ve seen how to deal 
with configuration changes such as screen orientation. But there 
are other events in an activity’s life that you might want to deal 
with to get the app to behave in the way you want. 

As an example, suppose the stopwatch is running and you get a 

phone call. Even though the stopwatch isn’t visible, it will continue } , 

running. But what if you want the stopwatch to stop while it’s fat* i*f you do* “t v-cally wd* Y ou ^ 

hidden, and resume once the app is visible again? stopwatch *to behave like this, jus 

play along wi-th us. Its a great e*tuse 
■to look at move litedycle methods. 

Start stop, and restart 

Fortunately, it’s easy to handle actions that relate to an activity’s 
visibility if you use the right lifecycle methods. In addition to the 
onCreate () and onDestroy () methods, which deal with the 
overall lifecycle of the activity, there are other lifecycle methods 
that deal with an activity’s visibility. 

Specifically, there are three key lifecycle methods that deal 
with when an activity becomes visible or invisible to the user: 
onStart (), onStop (), and onRestart () .Just as with 
onCreate () and onDestroy (), your activity inherits them 
from the Android Activity class. 

onStart () gets called when your activity becomes visible to the 
user. 

onStop () gets called when your activity has stopped being 
visible to the user. This might be because it’s completely hidden 
by another activity that’s appeared on top of it, or because the 
activity is going to be destroyed. If onStop () is called because the 
activity’s going to be destroyed, onSavelnstanceState () gets 
called before onStop () . 

onRestart () gets called after your activity has been made 
invisible, before it gets made visible again. 

We’ll take a closer look at how these fit in with the onCreate () 
and onDestroy () methods on the next page. 


An activity lias a state ol 
stopped il it’s completely 
hidden by another activity 
and isn’t visible to the 
user. The activity still 
exists in the background 
and maintains all state 
information. 
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The activity lifecycle: the visible lifetime 

Let’s build on the lifecycle diagram you saw earlier in the chapter, this 
time including the onStart (), onStop (), and onRestart () 
methods (the bits you need to focus on are in bold): 



Activity launched 



i 


© 

onCreate() 


on Destroy () 


i 



The activity gets launched, and the 
onCreate() method runs. 

Any activity initialization code in the 
onCreate () method runs. At this point, the 
activity isn’t yet visible, as no call to onStart () 
has been made. 

The onStart() method runs. It gets 
called when the activity is about to 
become visible. 

After the onStart () method has run, the user 
can see the activity on the screen. 


The onStopO method runs when the 
activity stops being visible to the user. 

After the onStop () method has run, the activity 
is no longer visible. 


If the activity becomes visible to the 
user again, the onRestart() method gets 
called followed by onStart(). 

The activity may go through this cycle many 
times if the activity repeatedly becomes invisible 
and then visible again. 



Activity destroyed 



o 


Finally, the activity is destroyed. 

The onStop () method will get called before 
onDestroy(). 
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onStopQ 


We need to implement two more lifecycle methods 


There are two things we need to do to update our Stopwatch app. First, we 
need to implement the activity’s on Stop () method so that the stopwatch 
stops running when the app isn’t visible. Once we’ve done that, we need 
to implement the onStart () method so that the stopwatch starts again 
when the app is visible. Let’s start with the on St op () method. 

Implement onStopO to stop the timer 

You override the onStop () method in the Android Activity class by 
adding the following method to your activity: 

@Override 

protected void onStop() { 

super.“Stop 0 ' *=~«,< -St*) 

lh the activity's superclass, 

} ahdroidappAdfivi-fcy. 

The line of code: 


□ 

Stopwatch 

4 H 

app/sre/main 

H3 


java 


m3 


com.hfad.stopwatch 

L_0 


Stopwatch 

Activity.java 


super.onStop(); 

calls the onStop () method in the Activity superclass. You need 
to add this line of code whenever you override the onStop () method 
to make sure that the activity gets to perform any other actions in the 
superclass onStop () method. If you bypass this step, Android will 
generate an exception. This applies to all of the lifecycle methods. If you 
override any of the Activity lifecycle methods in your activity, you 
must call the superclass method or Android will give you an exception. 

We need to get the stopwatch to stop when the onStop () method is 
called. To do this, we need to set the value of the running boolean to 
false. Here’s the complete method: 

@Override 

protected void onStop() { 

super.onStop(); 
running = false; 

} 

So now the stopwatch stops when the activity is no longer visible. The next 
thing we need to do is get the stopwatch to start again when the activity 
becomes visible. 


When you override 
any activity 
lilecycle method in 
your activity, you 
need to call the 
Activity superclass 
method. II you 
don’t, you’ll gfet an 
exception. 
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Now it's your turn. Change the activity code so that if the 
stopwatch was running before onStop () was called, it starts 
running again when the activity regains the focus. Hint: you may 
need to add a new variable. 


public class StopwatchActivity extends Activity { 
private int seconds = 0; 
private boolean running; 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_stopwatch); 
if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds") ; 
running = savedlnstanceState.getBoolean("running" ) ; 

} 

tfeve’s the tivst part <1the activity tade- 
You'll need to implement the onStavtO method 
and ehan^e othev methods slightly too. 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putlnt("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); 


runTimer(); 

} 

@Override 


@Override 

protected void onStop() { 

super.onStop(); 
running = false; 

} 
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sharpen solution 



Now it's your turn. Change the activity code so that if the 
stopwatch was running before onStop () was called, it starts 
running again when the activity regains the focus. Hint: you may 
need to add a new variable. 


public class StopwatchActivity extends Activity { 
private int seconds = 0; 
private boolean running; 

pv-ivate boolean wasRunning; 


I/Ve added a new variable, wasRunning, to record whether 
^the stopwatch was running be-Pore the onStopO method 
was tailed SO that we know whether to set it running 
again when the activity becomes visible again- 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_stopwatch); 
if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds"); 
running = savedlnstanceState.getBoolean("running"); 
wasRunning =• saved |nstande£tategetBoolean( w wasRunning w ); 

} / v 

runTimer () ; We'll restore tbe state o( the wasRunnmj 

} variable 1 tbe attivity is retreated- 


QOverride 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putlnt("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); 

saved|nstande£tatrputBoolean( u wasRunning , wasRunning); s-ta-te of the 

} wasRunning variable- 

QOverride 

protected void onStop() { 

super. onStop () ; R etoy .<J y/betber tbe stopwattb y/3s vuinnmj 

y,asfWm 9 - rurmin^ ^ iv , e onS ^ ? () „ e tbod was tailed- 

running = false; 

} 

^Override 

protected void onStdrtO { 

super.onStartO, K. | wp | emetti lhe ^rtO 

il (wasRunning) 1 method- K the stopwatch was 

running =■ true; running, set it running again- 
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The updated StopwatchActivity code 


We’ve updated our activity code so that if the stopwatch was running before 
it lost the focus, it starts running again when it gets the focus back. Make 
the following changes (in bold) to your version of StopwatchActivity.java: 


□ 

Stopwatch 

HB 


public class StopwatchActivity extends Activity { 

private int seconds = 0; * new variable, wasRunning, records 

private boolean running; whether the stopwatch was running bet 

private boolean wasRunning; the onStopO method was called- 


app/src/main 

4U 


ore 


java_ 

Mn 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_stopwatch); 
if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds"); 
running = savedlnstanceState.getBoolean("running") ; 
wasRunning = savedlnstanceState.getBoolean("wasRunning"); 


com. hfad. stopwatch 


Stopwatch 

Activity.java 


} 

runtimer(); 


'V 

Restore the state ok the wasRunning 
variable it the activity is recreated. 


QOverride 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putlnt("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); 

savedlnstanceState.putBoolean("wasRunning", wasRunning); 

} 


■ Save -the s-ta-te o( -the 
wasRunning variable 


QOverride 

protected void onStopO { 

super. onStop () ; •___ whether the stopwatch was running 

wasRunning = running; ^ -{-y, e 0 «StopO method was Called- 

running = false; 

} 


@Override 

protected void onStart() { 
super.onStart() ; K. 

if (wasRunning) { 
running = true; 

} 


Implemen-t tbe ohS-tariO method. 
I*P tbe s-fcopwa'tah was running, 
we II sei ii running again. 


} 


l/Ve^ve le*Pt ou*t some of *tbe activity 
Code as we don’t need to change it 
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what happens 


What 

© 


happens when you run the app 

The user starts the app, and clicks the Start button to set the stopwatch going. 

The runTimer () method starts incrementing the number of seconds displayed in the time_view 


text view. 



Q 


The user navigates to the device's home screen so the Stopwatch app is no longer 
visible. 


The onStop () method gets called, wasRunning is set to true, running is set to false, and the 
number of seconds stops incrementing. 




© 


The user navigates back to the Stopwatch app. 

The onStart () method gets called, running is set to true, and the number of seconds starts 
incrementing again. 




is set 
to true in the 
ohStartO method- 
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Test drive the app 

Save the changes to your activity code, then run the app. When 
you click on the Start button the timer starts: it stops when the 
app is no longer visible, and it starts again when the app becomes 
visible again. 



Stopwatch 


0 : 00:16 


Start 

Stop 

Reset 


The s-fcopwa-tch 
paused while the 
app wasirrt visible- 


there i are no 

Dumb Questions 


0 : 00:26 


Start 

Stop 

Reset 


The stopwatch started a^a’m 
when we went back to it- 


Q- Could we have used the onRestart () method 
instead of onStart () to set the stopwatch running again? 

onRestart () is used when you only want code to 
run when an app becomes visible after having previously been 
invisible. It doesn’t run when the activity becomes visible for the 
first time. In our case, we wanted the app to still work when we 
rotated the device. 



Why should that make a difference? 


When you rotate the device, the activity is destroyed and 
a new one is created in its place. If we’d put code to set the 
stopwatch running again in the onRestart () method 
instead of onStart (), it wouldn’t have run when the activity 
was recreated. The onStart () method gets called in both 
situations. 
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What if an app is only partially visible? 

So far you’ve seen what happens when an activity gets created and 
destroyed, and you’ve also seen what happens when an activity 
becomes visible, and when it becomes invisible. But there’s one more 
situation we need to consider: when an activity is visible but doesn’t 
have the focus. 

When an activity is visible but doesn’t have the focus, the activity is 
paused. This can happen if another activity appears on top of your 
activity that isn’t full-size or that’s transparent. The activity on top has 
the focus, but the one underneath is still visible and is therefore paused. 


fl N 


O * A 1 07:55 W 

^ Stopwatch 

0 : 00:1 

5 


Start 



Stop 



Reset 


Walk dog 

Any.do Reminder 


4 

® 

DISMISS 

© 

SNOOZE 

0 

DONE! 

<1 

o 

□ 


The s-fcopy/aieh a^tivi-ty 
is siil| visible, bui i-fc^s 
' partial ly obscured 
and no longer has 
the -Po£us. When -this 
happens, it pauses. 


rrom 


This is an 
activity -fr 
another app 
that's appeared 
on top or the 

stopwatch. 


An activity has a 
state of paused if it’s 
lost the locus hut is 
still visible to the 
user. The activity 
is still alive and 
maintains all its state 
inlormation. 


There are two lifecycle methods that handle when the activity is paused 
and when it becomes active again: onPause () and onResume () . 
on Pause () gets called when your activity is visible but another 
activity has the focus. onResume () is called immediately before your 
activity is about to start interacting with the user. If you need your 
app to react in some way when your activity is paused, you need to 
implement these methods. 

You’ll see on the next page how these methods fit in with the rest of the 
lifecycle methods you’ve seen so far. 
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The activity lifecycle: the foreground lifetime 


Let’s build on the lifecycle diagram you saw earlier in the chapter, this 
time including the onResume () and onPause () methods (the new 
bits are in bold): 



Activity launched 



i 


© 

onCreate() 


i 



©1 



Activity destroyed 



Q The activity gets launched, and the 

onCreate() and onStart() methods run. 

At this point, the activity is visible, but it doesn’t 
have the focus. 

Q The onResume() method runs. It gets 

called when the activity is about to move 
into the foreground. 

After the onResume () method has run, the 
activity has the focus and the user can interact 
with it. 


o 

o 


o 

o 

o 


The onPause() method runs when the 
activity stops being in the foreground. 

After the onPause () method has run, the 
activity is still visible but doesn’t have the focus. 

If the activity moves into the 
foreground again, the onResume() 
method gets called. 

The activity may go through this cycle many 
times if the activity repeatedly loses and then 
regains the focus. 

If the activity stops being visible to the 
user, the onStopO method gets called. 

After the onStop () method has run, the activity 
is no longer visible. 

If the activity becomes visible to the 
user again, the onRestart() method 
gets called, followed by onStart() and 
onResume(). 

The activity may go through this cycle many times. 

Finally, the activity is destroyed. 

As the activity moves from running to destroyed, 
the onPause () and onStopO methods get 
called before the activity is destroyed. 
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rotation 



Earlier on you talked about how 
the activity is destroyed and a new one is 
created when the user rotates the device. 
What happens if the activity is paused when 
the device is rotated? Does the activity go 
through the same lifecycle methods? 



That’s a great question, so let’s look at this in more detail 
before getting back to the Stopwatch app. 


The original activity goes through all its lifecycle methods, from onCreate () 
to onDestroy () . A new activity is created when the original is destroyed. 

As this new activity isn’t in the foreground, only the onCreate () and 
onStart () lifecycle methods get called. Here’s what happens when the user 
rotates the device when the activity doesn’t have the focus:: 


Original Activity 



(^ActMly launched 

ii onCreate() 

i 

onStart() 

i 

onResume() 

i 


(tcfivitY roMMhit) 

(El onPauseQ 
onStop() 

i 

on Destroy () 


© 


The user launches the activity. 

The activity lifecycle methods onCreate (), 
onStart (), and onResume () get called. 


Q 

O 


Another activity appears in front of it. 

The activity’s on Pause () method gets called. 

The user rotates the device. 

Android sees this as a configuration change. 

The onStop () and onDestroy () 
methods get called, and Android destroys the 
activity. A new activity is created in its place. 


o 


The activity is visible but not in the 
foreground. 

The onCreate () and onStart () 
methods get called. As the activity is visible 
but doesn’t have the focus, onResume () isn’t 
called. 


Replacement Activity 
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I see, the replacement activity doesn't reach 
a state of "running" because it's not in the 
foreground. But what if you navigate away from 
the activity completely so it's not even visible? 
If the activity's stopped, do onResume() and 
onPauseQ get called before onStopQ? 


Activities can go 
straight from onStart() 
to onStop() and 
bypass onPause() and 
onResume(). 

If you have an activity that’s 
visible, but never in the 
foreground and never has the 
focus, the onPause () and 
onResume () methods never 
get called. 

The onResume () method gets 
called when the activity appears 
in the foreground and has the 
focus. If the activity is only 
visible behind other activities, 
the onResume () method 
doesn’t get called. 

Similarly, the onPause () 
method gets called only when 
the activity is no longer in the 
foreground. If the activity is 
never in the foreground, this 
method won’t get called. 



onCreate() 


i 


-onStart() 4- 


i 


-> onResume() 



Activity running 



i 


■ onPauseQ 


i 


It a* activity stops <* 5 eti destroyed IseW ^ 
i*t appears m the -foreground, “the onStartO 
method is -followed by the onStop^ method- 
onResumeO and onPauseO are bypassed- 


-> onStop() 


i 


on Destroy () 


i 



Activity destroyed 



onRestart() 
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Stop the stopwatch if the activity's paused 

Let’s get back to the Stopwatch app. 

So far we’ve made the stopwatch stop if the Stopwatch app 
isn’t visible, and made it start again when the app becomes 
visible again. We did this by overriding the on St op () and 
onStart () methods like this: 


@Override 

protected void onStopO { 
super.onStop (); 
wasRunning = running; 
running = false; 

} 

@Override 

protected void onStart() { 

super.onStart(); 
if (wasRunning) { 
running = true; 



□ 

Stopwatch 

app/src/main 

java„ 

LQ 

com. hfad. stopwatch 



Stopwatch 


Activity.java 


Let’s get the app to have the same behavior if the app is only 
partially visible. We’ll get the stopwatch to stop if the activity is 
paused, and start again when the activity is resumed. So what 
changes do we need to make to the lifecycle methods? 

We want the Stopwatch app to stop running when the activity 
is paused, and start it again (if it was running) when the activity 
is resumed. In other words, we want it to behave the same as 
when the activity is stopped or started. This means that instead 
of repeating the code we already have in multiple methods, we 
can use one method when the activity is paused or stopped, 
and another method when the activity is resumed or started. 
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Implement the onPausel) and onResumel) methods 


We’ll start with when the activity is resumed or started. 

When the activity is resumed, the activity’s onResume () lifecycle 
method is called. If the activity is started, the activity’s onResume () 
method is called after calling onStart () . The onResume () method 
is called irrespective of whether the activity is resumed or started, which 
means that if we move our onStart () code to the onResume () 
method, our app will behave the same irrespective of whether the activity 
is resumed or started. This means we can remove our onStart () 
method, and replace it with the onResume () method like this: 


The onResumeO method is tailed 
when the activity is started or 
resumed A s we want the app to 
do the same thin$ irrespective ot 
whether it's started or resumed, 
we only need to implement the 
onResumeO method- 


Vpr-^t^tpfl yp4ri. 



Delete the 

o»£{a+i() 

method- 


□ 

Stopwatch 

HB 

app/src/main 

hus 


java 


@Override 

protected void onResume() 
super.onResume(); 
if (wasRunning) { 
running = true; 


Add the 

onResumeO 

method- 




com. hfad. stopwatch 

ur 


} 


Stopwatch 

Activity.java 


} 


We can do something similar when the activity is paused or stopped. 

When the activity is paused, the activity’s on Pause () lifecycle method 
is called. If the activity is stopped, the activity’s onPause () method is 
called prior to calling onStop () . The onPause () method is called 
irrespective of whether the activity is paused or stopped, which means we 
can move our onStop () code to the onPause () method: 


^ P)A7<^ -- 

i~ op () Delete the 

OflL a s R ^ aning — onStopO 

method- 


@Override 

protected void onPause() 
super.onPause(); 
wasRunning = running; 
running = false; 

} 


j Add the 

onPauseO 

method- 


a 

Stopwatch 

HU 

app/src/main 

L Q 

java 

LQ 

com. hfad. stopwatch 



i 


onStart() 


i 


onResumeO 


i 


Activity running 




onPause() 


onStop() 



The onPauseO method is 
tailed when the activity 
is paused or stopped- 
This means we only 
need to implement the 
onPauseO method- 


Stopwatch 

Activity.java 
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The complete StopwatchActivity code 

Here’s the full StopwatchActivity.java code for the finished app (with changes in bold): 


package com.hfad.stopwatch; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import java.util.Locale; 
import android.os.Handler; 
import android.widget.TextView; 


□ 

Stopwatch 

4 * 

app/src/main 

Hn 


java 


MU 


com.hfad.stopwatch 


Stopwatch 

public class StopwatchActivity extends Activity { Activity.java 

//Number of seconds displayed on the stopwatch. 


private int seconds = 

//Is the stopwatch running? 
private boolean running; ^ 
private boolean wasRunning 


Use seconds, running 2nd v/asRuymmg respectively to 
record the number of seconds passed, whether the 
-——J stopwatch is running, and whether the stopwatch was 
. 4 S running betore the activity was paused 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_stopwatch); 
if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds") 
running = savedlnstanceState.getBoolean("running"); 
wasRunning = savedlnstanceState.getBoolean("wasRunning"); 

} 

runTimer(); 


the previous state of -the 
stopwatch i-f -the activity^ been 
destroyed and recreated. 


Save the state of the stopwatch it 
@Override sf 'I s ab out to be destroyed- 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putInt("seconds ", seconds); 
savedlnstanceState.putBoolean("running", running); 
savedlnstanceState.putBoolean("wasRunning", wasRunning); 


Tbe activity 

Code Continues 
over the page- 
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The activity code (continued) 


^■pgpfeecT^ d void^nut o prH— 

^‘ T:a r* r P*wtrryr](y = runnings- 

vjoitw'i’nig—=^ f aloe; ^ 


4 - 


□ 

Stopwatch 


rt- M-: 

-W^Pnnni ng)—f 


pelete -these two methods. 


KHJ 

app/src/main 

MB 


java 


MT3 


com.hfad.stopwatch 

L g 

Stopwatch 

Activity.java 


@Override ^— |-f the adtivity s paused, stop the stopwatdh. 

protected void onPause() { 
super.onPause(); 
wasRunning = running; 
running = false; 

} 


@Override 

protected void onResume() 
super.onResume(); 
if (wasRunning) { 
running = true; 

} 

} 


4r~ f'P the adtivity s \resumed, start 
the stopwatdh again i-P it was 
running previously. 


//Start the stopwatch running when the Start button is clicked, 
public void onClickStart(View view) { 

running = true; ^Vjhis ^ets tailed whe» the 

} Start button is dlidked- 


The adtivity 

dode dontinues 
over the page- 
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StopwatchActivity, continued 


The activity code (continued) 


//Stop the stopwatch running when the Stop button is clicked, 
public void onClickStop(View view) { 
running = false; 


Tta jeb tailed v/hen -the S-tof bu-t-fco* is tlitked- 


//Reset the stopwatch when the Reset button is clicked. 


public void onClickReset(View view) 
running = false; 




This jets tailed v/ben be Resei bu-fc-fcon is tlitked- 


seconds = 0; 

} 




The vunTimevO me-thod uses a ttandlev -to increment 
■the seconds and update the text view- 


} 


//Sets the number of seconds on the timer, 
private void runTimer() { 

final TextView timeView = (TextView)findViewByld(R.id.time_view); 
final Handler handler = new Handler(); 
handler.post(new Runnable() { 

OOverride 

public void run() { 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; 

int secs = seconds%60; 

String time = String.format(Locale.getDefault() , 

"%d:%02d:%02d", hours, minutes, secs); 
timeView.setText(time); 
if (running) { 
seconds++; 

} 


□ 

Stopwatch 

4a 


handler.postDelayed(this, 1000); 


} 


}) ; 


app/src/main 

L Q 


java 


MU 


com. hfad. stopwatch 

i_r 


Let’s go through what happens when the code runs. 


Stopwatch 

Activity.java 
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What 

© 


happens when you run the app 

The user starts the app, and clicks on the Start button to set the stopwatch going. 

The runTimer () method starts incrementing the number of seconds displayed in the time_view 


text view. 




o 


Another activity appears in the foreground, leaving Stopwatch Activity partially visible. 

The onPause () method gets called, wasRunning is set to true, running is set to false, and the 
number of seconds stops incrementing. 




Stopwatch 

Activity 


•O 

seconds=15 

— running is set 
t o -false in -the 

running-false or> p awse0 ^oA- 


wasRunning=true 


© 


When Stopwatch Activity returns to the foreground, the onResume() method gets 
called, running is set to true, and the number of seconds starts incrementing 
again. 




Device 


seconds=15 


runmng=true 


Stopwatch 

Activity 


wasRunning=true 


running is set 
to true in the 
onResumeO method- 
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Test drive the app 

Save the changes to your activity code, then run the app. When 
you click on the Start button, the timer starts; it stops when the 
app is partially obscured by another activity; and it starts again 
when the app is back in the foreground. 


N 

O A L 07:57 W 

iiv ' Stopwatch 



0:00:34 


Start 

Stop 

Reset 


Wfe started our stopwatch- 


< o □ 


n 


OtH 08:00 


| Stopwatch 


© 


0:02:28 


O + L 08:00 


Start 

Stop 

Reset 


The stopwatch paused 
when -the activity was 
partially obscured- 


| Stopwatch 


Walk dog 

Any.do Reminder 


1 

® 

Q 

0 

DISMISS 

SNOOZE 

DONE! 

< 

o 

□ 


0:02:43 


Start 

Stop 

Reset 


The stopwatch started again 
when the activity £ar*e batk 
into the -foreground- 


< O □ 
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BE flie /\cfMfy 

On the right, you’ll See some activity 
code. Your job is to play like you’re 
the activity and say which 
code will run in each 
of the situations Below. 
We’ve labeled the code 
we want you to consider. 
We’ve done the first one to 
start you off. 

User starts the activity and starts using it. 

Code segments 6\, £). The adtivity is dv-eated, 
ther* made visible, then receives the -fodus. 



class MyActivity extends Activity! 

protected void onCreate( 

Bundle savedlnstanceState) { 
//Run code A 


} 


protected void onPause() { 

//Run code B 


o 


} 


protected void onRestartO { 
//Run code C 


User starts the activity, starts using it, 
then switches to another app. 


one’s -tou$h- 

User starts the activity, starts using it, 
rotates the device, switches to another 
app, then goes back to the activity. 


} 


protected void onResume() { 

//Run code D 


o 


} 


protected void onStopO { 
//Run code E 


o 


} 


protected void onRecreate() { 

//Run code F 


} 


protected void onStart() { 
//Run code G 




} 


protected void onDestroyO { 
//Run code H 


G 


} 
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BE tb&JSptMty 

On the right, you’ll See some activity 
code. Your job is to play like you’re 
the activity and say which 
code will run in each 
of the situations below. 
We’ve labeled the code 
we want you to consider. 
We’ve done the first one to 
Start you off. 


User starts the activity and starts using it. 

Code segments A, 6\, £). The adtivity is dreated, 
then made visible, then redeives -the -fodus. 


class MyActivity extends Activity! 


protected 


//Run 


void onCreate( 

Bundle savedlnstanceState) 
code A 


{ 


} 


protected 
//Run 


o 


void 

code 


onPause() { 

B 


} 


protected 

//Run 


void 

code 


onRestart() { 
C 


User starts the activity, starts using it, 
then switches to another app. 

Code segments 6\, D, B, £. The adtivity is 
dreated, -then made visible, then redeives -the 
-Podus. When the user switdhes to another app, 
it loses the -fodus and is y\o longer visible to the 
user. 

User starts the activity, starts using it, 
rotates the device, switches to another 
app, then goes back to the activity. 

Code segments A> 4 P> B; E, H, A; 4 V, B, E, 

C, £j, P- First, the adtivity is dreated, made 
visible, and redeives the -fodus. I/Vhen the devide 
is rotated, the adtivity loses the -fodus, stops 
being visible, and is destroyed- |t*s then dreated 
again, made visible, and redeives the -fodus. I/Vhen 
the user switdhes to another app and badk 
again, the adtivity loses the -Podus, loses visibility, 
bedomes visible again, and regains the -Podus. 


} 


protected 

//Run 


void 

code 


onResume() { 

D 


} 


protected void onStopO 
//Run code E 


o 


There’s no li-fedydle 

I method dal led 

jC onRedreatcO. 

protected void onRecreate() { 

//Run code F 


protected 
//Run 


0 


void 

code 


onStartO { 
G 


} 


protected 
© " Run 


void 

code 


onDestroyO { 
H 


} 
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Your handy guide to the lifecycle methods 


Method 

When it’s called 

Next method 

onCreateO 

When the activity is first created. Use it for normal 
static setup, such as creating views. It also gives 
you a Bundle that contains the previously saved 
state of the activity. 

onStart () 

onRestartQ 

When your activity has been stopped but just 
before it gets started again. 

onStart() 

onStartO 

When your activity is becoming visible. It's 
followed by onResume ( ) if the activity comes 
into the foreground, or onStop ( ) if the activity 
is made invisible. 

onResume( ) or 
onStop () 

onResume Q 

When your activity is in the foreground. 

onPause() 

onPause Q 

When your activity is no longer in the foreground 
because another activity is resuming. The next 
activity isn't resumed until this method finishes, 
so any code in this method needs to be quick. It's 
followed by onResume () if the activity returns 
to the foreground, or onStop () if it becomes 
invisible. 

onResume() or 
onStop () 

onStopQ 

When the activity is no longer visible. This can be 
because another activity is covering it, or because 
this activity is being destroyed. It's followed by 
onRestart ( ) if the activity becomes visible 
again, or onDestroy () if the activity is being 
destroyed. 

onRestart () or 
onDestroy() 

onDestroyQ 

When your activity is about to be destroyed or 
because the activity is finishing. 

None 
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Your Android Toolbox 


You’ve got Chapter 4 under 
your belt and now you’ve 
added the activity lifecycle to 
your toolbox. 


You tan download 
the £ull tode -for 
the thaptev £*-om 

httj>s : //t'nyw*-Uon</ 

rteadfivstAndvoid 



BULLET POINTS 


■ Each app runs in its own process by default. 


■ Only the main thread can update the user 
interface. 


■ Use a Handler to schedule code or post code 
to a different thread. 


■ A device configuration change results in the 
activity being destroyed and recreated. 

■ Your activity inherits the lifecycle methods from 
the android. app. Activity class. If you 
override any of these methods, you need to call up 
to the method in the superclass. 

■ onSavelnstanceState(Bundle) 

enables your activity to save its state before the 
activity gets destroyed. You can use the Bundle 
to restore state in onCreate () . 

■ You add values to a Bundle using 
bundle.put*("name", value). 

You retrieve values from the bundle using 

bundle.get*("name"). 

■ onCreate () and onDestroy ( ) deal with 
the birth and death of the activity. 

■ onRestart () ,onStart (), and 
onstop () deal with the visibility of the activity. 

■ onResume () and onPause () handle when 
the activity gains and loses the focus. 



Activity launched 



i 


onCreate() 


j 


-onStart() 4 - 


i 



due 

I 


-> onStop() 


i 


on Destroy () 


i 


Activity destroyed 




onRestart() 
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5 VieWs and View groups 






^ Enjoy the View 


You’ve seen how to arrange GUI components using a linear 
layout, but so far we’ve only scratched the surface. 

In this chapter we’ll look a little deeper and show you how linear layouts really work. 
We’ll introduce you to the frame layout, a simple layout used to stack views, and we’ll 
also take a tour of the main GUI components and how you use them. By the end of 
the chapter, you’ll see that even though they all look a little different, all layouts and GUI 
components have more in common than you might think. 


this is a new chapter 
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the ui 


Your user interface is made up of 
layouts and (MJI components 


As you already know, a layout defines what a screen looks like, and 
you define it using XML. Layouts usually contain GUI components 
such as buttons and text fields. Your user interacts with these to make 
your app do something. 

All the apps you’ve seen in the book so far have used linear layouts, 
where GUI components are arranged in a single column or row. In 
order to make the most out of them, however, we need to spend a bit 
of time looking at how they work, and how to use them effectively. 




These are all e%3n>yl 
ot linear layouts- 


V 



0 : 02:43 


Start 

Stop 

Reset 


A little message 
Send Message 


>0 


Message 



In this chapter, we’re going to take a closer look at linear layouts, 
introduce you to their close relative the frame layout, and show 
you other GUI components you can use to make your app more 
interactive. 

Let’s start with linear layouts. 
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views and view groups 

linearlayout displays views 
in a single row or column 

As you already know, a linear layout displays its views next to each other, 
either vertically or horizontally. If it’s vertically, the views are displayed in 
a single column. If it’s horizontally, the views are displayed in a single row. 

You define a linear layout using the <LinearLayout> element like this: 


E 


LinearLayout 

FrameLayout 


You use ] 
<LmeavLayout> 
•bo de-f'mc a Imeav- 
layout 


CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android” 



android:layout_width="match_j?arent" 7 The layou'b_u/id'tb a^d layou*b_bei^V>*b spedi-Py 
android : layout_height="match_j>arent"Y ) ' w ^ size you v/a^i the layout to be- 


android:orientation="vertical" 


. . .> 


There may be oiher 
atbribu-bes -too. 


'The orienia-bion spedi-Pies 
wheiher you waivb -bo display 
views vertically or horizjOKrbally- 


</LinearLayout> 


The xmlns : android attribute is used to specify the Android 
namespace, and you must always set it to "http: / /schemas . 
android.com/apk/res/android". 


You MUST set the layouts width and height 

The android:layout_width and 
android: layout_height attributes specify how wide 
and high you want the layout to be. These attributes are 
mandatory for all types of layout and view. 

You can set android: layout_width and 
android: layout_height to ”wrap_content", 
"match_parent" or a specific size such as 8dp—that’s 8 
density-independent pixels. "wrap_content" means that 
you want the layout to be just big enough to hold all of the 
views inside it, and "match_parent" means that you want 
the layout to be as big as its parent—in this case, as big as the 
device screen minus any padding (there’s more about padding 
in a couple of pages). You will usually set the layout width 
and height to "match_parent". 

You may sometimes see android: layout_width and 
android: layout_height set to "f ill_parent". 

" f ill_parent" was used in older versions of Android, and 
it’s now replaced by "match_parent". " f ill_parent" 
is deprecated. 



Geejc BffS 


What are density-independent pixels? 

Some devices create very sharp images 
by using very tiny pixels. Other devices 
are cheaper to produce because they 
have fewer, larger pixels. You use 
density-independent pixels (dp) to 
avoid creating interfaces that are overly 
small on some devices, and overly large 
on others. A measurement in density- 
independent pixels is roughly the same 
size across all devices. 
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orientation 


Orientation is vertical or horizontal 

You specify the direction in which you wish to arrange views using 
the android: orientation attribute. 

As you’ve seen in earlier chapters, you arrange views vertically 
using: 

android:orientation="vertical" 

This displays the views in a single column. 

You arrange views horizontally in a single row using: 

android:orientation="horizontal" 

When the orientation is horizontal, views are displayed from left to 
right by default. This is great for languages that are read from left to 
right, but what if the user has set the language on their device to one 
that’s read from right to left? 

For apps where the minimum SDK is at least API 17, you can get 
views to rearrange themselves depending on the language setting on 
the device. If the user’s language is read from right to left, you can get 
the views to arrange themselves starting from the right. 

To do this, you declare that your app supports languages that are read 
from right to left in your AndroidManifest.xml file like this: 


-HP 

LinearLayout 

n 

FrameLayout 

i 

^ Q 2:27 | 

(3 Layout Examples 


fro 


Message 

Send 


In vertical orientation, 
the views are arranged 
in a single Column. 


<manifest ...> 

Application 

android: supportsRtl= " true " > 

. T 

</applications n^dv-oid Studio may add this 

. - . . Ime toAt +«• you. It must ao 

inside the <appkation> tag. 

supportsRtl means “supports right-to-left languages.” 


□ 

MyApp 

tl 

app/src/main 

Li 

|</ ll 

AndroidManifest.xml 


i *A Q 2:28 


\ur • Q ^ | 1 

(3 Layout Examples 

Layout Examples 

[To Message Send 


Send Message To 

This is a horizontal orientation where the 


This is a horizontal orientation where the 

language is read -Prom le-Pt to right- 


language is read -from right to le-Pt- 
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Padding adds space 


•0 


views and view groups 

LinearLayout 
FrameLayout 


If you want there to be a bit of space around the edge of the layout, 
you can set padding attributes. These attributes tell Android how 
much padding you want between each of the layout’s sides and its 
parent. Here’s how you would tell Android you want to add padding 
of 16dp to all edges of the layout: 

<LinearLayout ... 

android :padding=" 16 dp" >^—'This adds -the same paddmj 


bo all ed$es o£ the layout- 


</LinearLayout> 


If you want to add different amounts of padding to different edges, 
you can specify the edges individually. Here’s how you would add 
padding of 32dp to the top of the layout, and 16dp to the other 
edges: 



padd'mj 


<LinearLayout ... 

android:paddingBottom= M 16dp" j 

>" / 


padd'mgLe-P-fc 

android:paddingLeft="16dp M 

android :paddingRight="16dp" faddmj to the individual ed^es. 


padding 


paddmgTop 


android:paddingTop="32dp" 


</LinearLayout> 


If your app supports right-to-left languages, you can use: 



paddin^Bottom paddinjjRijjht 


android:paddingS tart="16dp" 

and: 

android:paddingEnd="16dp M 

to add padding to the start and end edges of the layout instead of 
their left and right edges. 

android: PaddingStart adds padding to the start edge of the 
layout. The start edge is on the left for languages that are read from 
left to right, and the right edge for languages that are read from right 
to left. 

android: PaddingEnd adds padding to the end edge of the layout. 
The end edge is on the right for languages that are read from left to 
right, and the left edge for languages that are read from right to left. 



Watch it! 


with API 


You can 
only use 
start and 
end 

properties 
17 or above. 


If you want your app to 
work on older versions of 
Android, you must use the 
left and right properties 
instead. 
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dimension resources 


Add a dimension resource file for 
consistent padding across layouts 



LinearLayout 

FrameLayout 


In the example on the previous page, we hardcoded the padding 
and set it to 16dp. An alternative approach is to specify the 
padding in a dimension resource file instead. Doing so makes it 
easier to maintain the padding dimensions for all the layouts in 
your app. 

To use a dimension resource file, you first need to add one to 
your project. To do this, first select the app/src/main/res/values 
folder in Android Studio, then go to File menu and choose 
New—>Values resource file. When prompted, enter a name 
of “dimens” and click on the OK button. This creates a new 
resource file called dimens.xml. 


Android Studio may have already 
added this tile tor you, hut 
it defends on which version ot 
Android studio you're usin$. 


Once you’ve created the dimension resource file, you add 
dimensions to it using the <dimen> element. As an example, 
here’s how you would add dimensions for the horizontal and 
vertical margins to dimens.xml: 


<?xml version="1.0" encoding="utf-8"?> 

<resources> 

<dimen name="activity_horizontal_margin">16dp</dimen> 
<dimen name= M activity_vertical_margin M >16dp</dimen> 
</resources> 



You use the dimensions you create by setting the padding 
attributes in your layout file to the name of a dimension resource 
like this: 


□ 

I o 

app/src/main 

>-c□ 


This Creates 
-two dimension 
resources. 



values 



dlmens.xml 


<LinearLayout ... 

android:paddingLef t= n @dimen/activity_horizontal_margin M £ 
android:paddingRight= M @dimen/activity_horizontal_margin" 


The paddin^Le-Ct and 

paddin^Ri^ht attributes 

are set to @dimen/activity_ 

^ h oriz^>n ta l__m a n • 


android : paddingTop="@dimen/activity_vertical_margin" —The paddingTop and 

android : paddingBottom= M @dimen/activity_vertical_margin">^ paddingBottom attributes 

dre set to <®dimen/activity 

With that kind of setup, at runtime, Android looks up the values verti£al__margin. 

of the attributes in the dimension resource file and applies the 
values it finds there. 
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A linear layout displays views in the 
order they appear in the layout XML 


E 


LinearLayout 

FrameLayout 


When you define a linear layout, you add views to the layout in the order 
in which you want them to appear. So, if you want a text view to appear 
above a button in a linear layout, you must define the text view first: 

CLinearLayout ... > 

CTextView £--- 

android:layout_width="wrap_content" 
android:layout_height= M wrap_content" 
android:text="@string/text_viewl" /> 


<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/click_me" /> 

</LinearLayout> 

You specify the width and height of any views using 
android: layout_width and android: layout_ 
height. The code: 

android:layout_width="wrap_content" 

means that you want the view to be just wide enough for its 
content to fit inside it—for example, the text displayed on a 
button or in a text view. The code: 

android:layout_width="match_parent" 
means that you want the view to be as wide as the parent layout. 


|-f you define “the view above *tbe 
button in the ><ML, the te*t view will 
appear above the button when displayed- 



android: lay outwidth and 
androiddayoutjheight are 
mandatory attributes for alt 
views, no matter which layout 
you use. 


If you need to refer to a view elsewhere in your code, you need 
to give it an ID. As an example, you’d give the text view an ID of 
"text_view" using the code: 


CTextView 

android:id="@+id/text_view" 
... /> 


They can take the values 
wrap_content, match_parent, 
or a specific dimension value 
such as l6dp. 
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margins 


Use margins to add distance between views 


•0 


When you position a view using a linear layout, the layout doesn’t leave much 
of a gap between views. You can increase the size of the gap by adding one or 
more margins to the view. 

As an example, suppose you wanted to put one view below another, but add 
48dp of extra space between the two. To do that, you’d add a margin of 48dp 
to the top of the bottom view: 

LinearLayout ... > 

<Button 

android:id="@+id/button_click_me" 

... /> 


<Button 

android:id="@+id/button_below M 
android:layout_width= n wrap_content" 
android:layout_height="wrap_content M 

android:layout_marginTop= M 48dp M ^ 

android:text="@string/button_below" /> 
</LinearLayout> 


Adding a “to 

•the i of o-f tbe hottor* 
button adds e%tra spade 
between ibe two views. 


Here’s a list of the margins you can use to give your views extra space. Add 
the attribute to the view, and set its value to the size of margin you want: 


android:attribute="8dp" 


Attribute What it does 

layout_marginTop Adds extra space to the top of the view. 


layoutjmarginBottom Adds extra space to the bottom of the view. 


layoutjmarginLeft, Adds extra space to the left (or start) of the view. 

layoutjrnarginStart 

layoutjmarginRight, Adds extra space to the right (or end) of the view. 

layoutjmarginEnd 


layout_margin 


Adds equal space to each side of the view. 


LinearLayout 

FrameLayout 



CLICK ME 


CLICK ME 


CLICK ME 


CLICK ME 


CLICK ME 
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Let's change up a basic linear layout 


views and view groups 

LinearLayout 
FrameLayout 



At first glance, a linear layout can seem basic and inflexible. After all, 
all it does is arrange views in a particular order. To give you more 
flexibility, you can tweak your layout’s appearance using some more 
of its attributes. To show you how this works, we’re going to transform 
a basic linear layout. 


The layout is composed of two editable text fields and a button. To 
start with, these text fields are simply displayed vertically on the screen 
like this: 


Bsch view takes up the 
least possible Amount of 
vertical spade. 


i 

Q 2:27 | 

Layout Examples 



fa 


Message 


Send 


We’re going to change the layout so that the button is 
displayed in the end corner of the layout, and one of the 
editable text fields takes up any remaining space. 
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get started 


Here's the starting point for the linear layout 

The linear layout contains two editable text fields and a button. 

The button is labeled “Send,” and the editable text fields contain 
hint text values of “To” and “Message.” 

Hint text in an editable text field is text that’s displayed when the 
field is empty. It’s used to give users a hint as to what sort of text 
they should enter. You define hint text using the android: hint 
attribute: 



LinearLayout 

FrameLayout 


CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="16dp" 
android:orientation="vertical" 

tools:context="com.hfad.views.MainActivity" > 


__ The editable tent -fields ave as 
wide as the pavent layout- 

"match_parent" 


The values o( 
•these S-br’mJs 
av-e de-P’med 
in strips. I 
as usual 


<EditText 

android:layout_width : 
android:layout_height="wrap_content" 

android: hint="@string/to’’ /> ^ dhdroid^hiivt displays a hi*t to the user as to 

what they should type in the editable tent -field- 

<EditText 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:hint="@string/message" /> 



<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content' 
■ android:text="@string/send" /> 
</LinearLayout> 

All of these views take up just as much vertical space in the 
layout as they need for their contents. So how do we make the 
Message text field taller? 


i 

Q 2:27 

Layout Examples 

d [ro A 

1 

^ Message 

i 



The te*t values 
displayed here dome 

-Cvorn String resources 
m stvmy.TCml 
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Make a view streeeeetch by adding weight 

All of the views in our basic layout take up just as much vertical space 
as they need for their content. But what we actually want is to make 
the Message text field stretch to take up any vertical space in the layout 
that’s not being used by the other views. 


•0 


views and view groups 

LinearLayout 
FrameLayout 


Wie warrt *to make *tke 

Message -texi -f ield s-tve'tdk 
vev-tidally so that it -fills any 
spave spade in the layout- 


i D 2:35 ■ 

0 Layout Examples 





in? 

Message 


Send 



In order to do this, we need to allocate some weight to the Message text 
field. Allocating weight to a view is a way of telling it to stretch to take 
up extra space in the layout. 

You assign weight to a view using: 


android:layout_weight="number" 


where number is some number greater than 0. 

When you allocate weight to a view, the layout first makes sure that 
each view has enough space for its content: each button has space for its 
text, each editable text field has space for its hint, and so on. Once it’s 
done that, the layout takes any extra space, and divides it proportionally 
between the views with a weight of 1 or greater. 
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weight header 


Adding weight to one view 

We need the Message editable text field to take up any extra 
space in the layout. To do this, we’ll set its layout_weight 
attribute to 1. As this is the only view in the layout with a weight 
value, this will make the text field stretch vertically to fill the 
remainder of the screen. Here’s the code: 



LinearLayout 

FrameLayout 


CLinearLayout ... > 


<EditText 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:hint="@string/to" /> 


This <£ditTe*t> and the <ButW 
have no layout^wei^ht attribute set- 
They’ll "take up as muth room as their 
eon-tent needs, but no more 


<EditText 


This view is -the only 
ohe with any weight- 
It will expand to -— 
■fill the spade that's 
*ot needed by any 
o-P the other views. 


android:layout_width="match_parent" 


android:layout_height="Odp" 



android:layout_weight="1" 

android:hint="@string/message" /> 


<Button 


The height o( the view will be determined by 
the linear layout based on the layout_weight- 
Setting the layout_height to u 0dp'' is more 
e-P-Pidient than setting it to W wrap__dontent”, 
as this way Android doesn't have to work out 
the value o-P w wrap__dontent"- 


android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/send" /> 

</LinearLayout> 

Giving the Message editable text field a weight of 1 means that it 
takes up all of the extra space that’s not used by the other views 
in the layout. This is because neither of the other two views has 
been allocated any weight in the layout XML. 


The /Message view has a weight 
o-P I. As it's -the only view with 
its weight attribute set it 
expands to take up any extra 
vertidal spade in the layout- 


i K i 0 2:32 ■ 

0 Layout Examples 




V 


By de-Cault, the Message 
hint te*t appears in the 
middle- Well deal with 
■that next- 

Message 
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Adding weight to multiple views 

In this example, we only had one view with a weight attribute 
set. But what if we had more than one? 

Suppose we gave the To text field a weight of 1, and the 
Message text field a weight of 2, like this: 

<LinearLayout ... > 

<EditText 

android:layout_width="match_parent" 

android:layout_height= M Odp M 
android:layout_weight="1" 

android:hint="@string/to" /> 

<EditText 

android:layout_width="match_parent" 

android:layout_height= M Odp M 
android:layout_weight= M 2" 

android:hint="@string/message" /> 

</LinearLayout> 


To figure out how much extra space each view takes up, start 
by adding together the layout_weight attributes for each 
view. In our case, this is 1+2=3. The amount of extra space 
taken up by each view will be the view’s weight divided by the 
total weight. The To view has a weight of 1, so this means 
it will take up 1 /3 of the remaining space in the layout. The 
Message view has a weight of 2, so it will take up 2/3 of the 
remaining space. 


•0 


views and view groups 

LinearLayout 

FrameLayout 


J- w v.r'urnpc; WC re 

no-t veally go'mg to ehange -the 
layout so -that it looks like -this. 


i 

k a Q 2:33 ■ 
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T 

The To view has a weight 

of I, SO i-t takes up 1/1 
ot the e*tra spade- 

l 

A- 


The Message view has a 
Message weiglvt o-P 2-, so "tolkcs up 
2-/3 <y P -the ex-t\ra spade- 


Send 
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gravity 


LinearLayout 

FrameLayout 


Gravity controls the position 
of a view's contents 

The next thing we need to do is move the hint text inside the 
Message text field. At the moment, it’s centered vertically 
inside the view. We need to change it so that the text appears 
at the top of the text field. We can achieve this using the 
android: gravity attribute. 

The android: gravity attribute lets you specify how you 
want to position the contents of a view inside the view—for 
example, how you want to position text inside a text field. If you 
want the text inside a view to appear at the top, the following 
code will do the trick: 

android:gravity= M top" 

We’ll add an android: gravity attribute to the Message text 
field so that the hint text moves to the top of the view: 

<LinearLayout ... > 

<EditText 

android:layout_width="match_parent" 



0 Layout Examples 


To 


/t 


VVc need to move *the 
Message hint “text 
fi-om the Unit* of 
the view to the top• 


Message 


Send 



android: 

android: 

android: 

android: 


layout_height="Odp" 
layout_weight 

gravity="top" 

hint="@string/message" 



Displays the text inside the text field 
ai -the -bop of the tent -f ield 

/> 


</LinearLayout> 



Test drive- 

Adding the android: gravity attribute to the Message text field 
moves the hint text to the top of the view, just like we want. 

You’ll find a list of the other values you can use with the 
android: gravity attribute on the next page. 


i V Q 2:34 
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Message 

$ 

The Message hint text 
now appears at the top 
of the view. 


Send 
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Values you can use with the 
android.gravity attribute 

Here are some more of the values you can use with the 
android: gravity attribute. Add the attribute to your view, 
and set its value to one of the values below: 

android:gravity="value" 


Value 


What it does 


views and view groups 

LinearLayout 
FrameLayout 



androicfc gravity lets you 
say where you want 
the view’s contents to 
appear inside the view. 


top 


Puts the view's contents at the top of the view. 


bottom 


Puts the view's contents at the bottom of the view. 


left 


Puts the view's contents at the left of the view. 


right 


Puts the view's contents at the right of the view. 


start 

end 


Puts the view's contents at the start of the view. 


Puts the view's contents at the end of the view. 


s-fcar-t end are 
only available i-P 
you re using API 17 
or above- 


center_vertical Centers the view's contents vertically. 


centerjtiorizontal Centers the view's contents horizontally. 


center 

fill_vertical 

filljtiorizontal 

fill 


Centers the view's contents vertically and horizontally. 

Makes the view's contents fill the view vertically. 

Makes the view's contents fill the view horizontally. 

Makes the view's contents fill the view vertically and horizontally. 


You can also apply multiple gravities to a view by separating 
each value with a “ I”. To sink a view’s contents to the 
bottom-end corner, for example, use: 

android:gravity="bottom|end" 
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layout_gravity 


layout.gravity controls the 
position of a view within a layout 

There’s one final change we need to make to our layout. The Send 
button currently appears in the bottom-left corner. We need to move 
it over to the end instead (the bottom-right corner for left-to-right 
languages). To do this, we’ll use the android: layout_gravity 
attribute. 

The android: layout_gravity attribute lets you specify where 
you want a view in a linear layout to appear in its enclosing space. You 
can use it to push a view to the right, for instance, or center the view 
horizontally. To move our button to the end, we’d need to add the 
following to the button’s code: 

android:layout_gravity= M end M 



LinearLayout 

FrameLayout 


We II move -bKc button t> *tbe 
end SO it appears on tbe ri^bt 
-for le-Pt-to-vi^bt lan^ua^es, 
and on tbe le*ft (or \ri$bt- 
to-le*ft lan^ua^es. 


Send 


Wait a sec. I thought 
you said that gravity was used 
to say where you wanted to 
put the view's contents, not 
the view itself? 


Linear layouts have two attributes that sound 
similar to one another, gravity and layout_gravity. 

A couple of pages ago, we used the android: gravity attribute 
to position the Message text inside a text view. This is because the 
android: gravity attribute lets you say where you want a view’s 
contents to appear. 

android: layout_gravity deals with the placement of 
the view itself, and lets you control where views appear in their 
available space. In our case, we want the view to move to the end of 
its available space, so we’re using: 

android:layout_gravity="end n 

There’s a list of some of the other values you can use with the 
android: layout_gravity attribute on the next page. 
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views and view groups 

More values you can use with the 
android:layout.gravity attribute 


E 


LinearLayout 

FrameLayout 


Here are some of the values you can use with the 
android: layout_gravity attribute. Add the attribute 
to your view, and set its value to one of the values below: 

android:layout_gravity="v 


You can affly mu Itiplc layoui_gv-avi*ty values by 
separating ea£b one >witb a | . A s an ex-ample, 

„ _use androidl:layout_gravity- w bottom|end' to 

move a view to tbe bottom-end Corner ot its 
available spate- 


Value 


What it does 


top, bottom, left, right 


Puts the view at the top, bottom, left, or right of its 
available space. 


start, end Puts the view at the start or end of its available space. 

center_vertical, centerjtiorizontal Centers the view vertically or horizontally in its available 

space. 


center 


Centers the view vertically and horizontally in its 
available space. 


fill_vertical, fill_horizontal Grows the view so that it fills its available space vertically 

or horizontally. 

fill Grows the view so that it fills its available space vertically 

and horizontally. 


android- lay out gravity lets you say where you 
want views to appear in their available space. 

android-layout_gravity deals with the placement 
ol the view itself, whereas android: gravity 
controls how the view’s contents are displayed. 
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full code 


LinearLayout 

FrameLayout 


xmlns:tools="http://schemas.android.com/tools" 

android:layout_width="match_parent" 

android:layout_height="match_parent" 

android:padding="16dp M 

android:orientation="vertical" 

tools:context="com.hfad.views.MainActivity" > 


The full linear layout code 


Here’s the full code for the linear layout: 


•0 


<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 


<EditText 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:hint="@string/to" /> 


<EditText 

android:layout_width="match_parent" 

android:layout_height="Odp" 

android:layout_weight="1" 

android:gravity="top" 

android:hint="@string/message" /> 


<Button 


android:layout_width="wrap_content" 
android:layout_height="wrap_content" 


android:layout_gravity="end" 

android:text="@string/send" /> 


android^ravity is different -from 

</LinearLayout> androidteyout^v-avity- android^ravity 

relates to the tor tents ot the view, 
while android:layowt_<yravity relates to 
the view itself- 


Q Layout Examples 


Message 




The dontents of -the 
Message view $et displayed 
at “the -top o( -the view. 
There’s plenty o£ spade to 
enter text- 


The Send button 
appears in the end 
dorner. 


Send 
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LinearLayout 

FrameLayout 


linearlayout: a summary 


Here’s a summary of how you create linear layouts. 


How you specify a linear layout 


You specify a linear layout using <LinearLayout>. You must 
specify the layout’s width, height, and orientation, but padding is 
optional: 


CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

. . . > 

</LinearLayout> 


Views get displayed in the order they're listed in the code 


When you define a linear layout, you add views to the layout in the 
order in which you want them to appear. 


Stretch views using weight 


By default, all views take up just as much space as necessary for their 
content. If you want to make one or more of your views take up more 
space, you can use the weight attribute to make it stretch: 


android:layout_weight="1" 


Use gravity to specify where a view's contents appear within a view 


The android: gravity attribute lets you specify how you want 
to position the contents of a view—for example, how you want to 
position text inside a text field. 


Use layoutgravity to specify where a view appears in its available space 


The android: layout_gravity attribute lets you specify where 
you want a view in a linear layout to appear in its parent layout. You 
can use it to push a view to the end, for instance, or center the view 
horizontally. 

That’s everything we’ve covered on linear layouts. Next we’ll take a 

look at the frame layout. 
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frame layouts 


Frame layouts stack their views 



LinearLayout 

FrameLayout 


As you’ve already seen, linear layouts arrange their views in a single 
row or column. Each view is allocated its own space on the screen, 
and they don’t overlap one another. 

Sometimes, however, you want your views to overlap. As an example, 
suppose you want to display an image with some text overlaid on top 
of it. You wouldn’t be able to achieve this just using a linear layout. 

If you want a layout whose views can overlap, a simple option is to 
use a frame layout. Instead of displaying its views in a single row 
or column, it stacks them on top of each other. This allows you to, 
for example, display text on top of an image. 

How you define a frame layout 

You define a frame layout using the <FrameLayout> element like 
this: 


Frame layouts let your views overlap one 
another- This is useful -Por displaying 
text on top o( images, lor example. 



You use 

<F\rameLayout> 
to de-Pine a 
-Prame layout- 


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 

android: layout width="match parent" / .. ll -l i 

1 ~ \ These ay * samC attributes we 

android :layout_height="match_parent"J ( oy . ouV . | mcav - layout 
. . . > 


... ^_.This is where you add any views yoi 

wish to stadk in the -Pra^e layout. 


</FrameLayout> 


Just like a linear layout, the android: layout_width and 
android: layout_height attributes are mandatory and specify 
the layout’s width and height. 


Create a new project 

To see how frame layouts work, we’re going to use one to overlay 
text on an image. Create a new Android Studio project for an 
application named “Duck” with a company name of “hfad.com”, 
making the package name com. hf ad. duck. The minimum SDK 
should be API 19 so that it will work on most devices. You’ll need an 
empty activity called “MainActivity” with a layout called “activity_ 
main” so that your code matches ours. Make sure you uncheck 
the Backwards Compatibility (AppCompat) option when 
you create the activity. 
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Add an image to your project 

We’re going to use an image called duck.jpg in our layout, so we need to 
add it to our project. 

To do this, you first need to create a drawable resource folder (if Android 
Studio hasn’t already created it for you). This is the default folder for 
storing image resources in your app. Switch to the Project view of 
Android Studio’s explorer, select the app/src/main/res folder, go to the 
File menu, choose the New... option, then click on the option to create 
a new Android resource directory. When prompted, choose a resource 
type of “drawable”, name the folder “drawable”, and click on OK. 

Once you’ve created the drawable folder, download the file duck.jpg from 
https://git.io/v9oet , then add it to the app/src/main/res/draw able folder. 

We’re going to change activity_main.xml so that it uses a frame layout 
containing an image view (a view that displays an image) and a text 
view. To do this, replace the code in your version of activity_main.xml 
with ours below: 


LinearLayout 

FrameLayout 




<?xml version="1.0" encoding="utf-8"?> 


Were using a 
-frame layout. 


<FrameLayout xmlns : android= M http: //schemas . android. com/apk/res/android" 


xmlns:tools= M http://schemas.android.com/tools” 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content" 
tools:context="com.hfad.duck.MainActivity"> 


This adds an— ' 
image to the 
-frame layout- 
Youll -find out 
more about image 
views later in the 


□ 

Duck 

43 

app/sre/main 

ma 


<ImageView 

android:layout_width="match_j?arent" 
android:layout_height="wrap_content" 

android: scaleType="centerCrop" «This drops the images edges so 
android: src="@drawable/duck"/> t't* m avai ' a ^ e s P ate 


res 


M3 

layout 


<TextView 


activity_main.xml 

This line tells Android to use the image 
named w dudk w located in the drawable -Polder. 


dhapter. 

This adds a -text View android: layout_width="wrap_content" 

■to "the -frame layout android: layout_height="wrap_content" 
android:padding="16dp" 

android: textSize="20sp"— We've intreased the size of the text- 
android:text="It's a duck!" /> 

</FrameLayout> N. |„ a real-world dudk a PP , you'd wa»t 

to add this text as a String resourde. 

Then run your app, and we’ll look at what the code does 
on the next page. 
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frame layouts stack views 


A frame layout stacks views in the 
order they appear in the layout XML 

When you define a frame layout, you add views to the layout in 
the order in which you want them to be stacked. The first view is 
displayed first, the second is stacked on top of it, and so on. In our 
case, we’ve added an image view followed by a text view, so the text 
view appears on top of the image view: 

<FrameLayout ...> 

<ImageView 

android:layout_width="match_parent" 
android:layout_height="wrap_content 
android:scaleType="centerCrop" 
android:src="@drawable/duck"/> 

CTextView This is the te*t view. 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:padding="16dp" 
android:textSize="2Osp" 
android:text="It's a duck!" /> 

</FrameLayout> 

Position views in the layout using layout_gravity 

By default, any views you add to a frame layout appear in the top- 
left corner. You can change the position of these views using the 
android: layout_gravity attribute, just as you could with a 
linear layout. As an example, here’s how you would move the text 
view to the bottom-end corner of the image: 

<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:padding="16dp" 

android:layout_gravity="bottom|end 

android: textSize="2Osp" This sinks 

android: text=" It' s a duck!" /> / 

the bottom - 

</FrameLayout> Chd 
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views and view groups 

LinearLayout 
FrameLayout 

One of the disadvantages of using a frame layout is that it’s easy 
for views to overlap one another when you don’t want them to. 

As an example, you may want to display two text views in the 
bottom-end corner, one above the other: 


You can nest layouts 



l-P youVe not dare-ful, views tan 
overlap one another like this. 


It’s possible to solve this problem by adding margins or padding 
to the text views. A neater solution, however, is to add them 
to a linear layout, which you then nest inside the frame layout. 
Doing this allows you to arrange the two text views linearly, 
then position them as a group inside the frame layout: 


Here, the -frame 
layout Contains an 
i">age view and a 
linear layout- 






It's a duck! 
real one) 


This is the 
linear layout- It 

Contains two 
text views neatly 
arranged in a 
single dolumn- 


We’ll show you the full code for how to do this on the next page. 
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full code 


The full code to nest a layout 

Here’s the full code to nest a linear layout in a frame layout. 
Update your version of activity_main.xml to include our changes, 
then run your app to see how it looks. 


<?xml version="1.0" encoding="utf-8"?> 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
tools:context="com.hfad.duck.MainActivity"> 


LinearLayout 

FrameLayout 

□ 

Duck 

HU 

app/src/main 

4H3 

5 S « 

MU 

layout 


res 


activity_ 

main.xml 


<ImageView 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:scaleType="centerCrop" 

android: src="@drawable/duck"/> adding a Imeav" layout 

that's just bi$ Cirvoujb to 
donta’m its te*t views. 

<LinearLayout 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

Move eadh android: orientation="vertical" This line sinks 

text view , . , n . ... .. , ... the linear 

in the linear “ 1 layout to the 

layout to the -^ android: gravity="end" bottom-end 


tY\d o\ its 

available spate- 


android:padding="16dp" > 


£o\rhe\r ot the 
-Pv-ame layout- 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:textSize="20sp" 
android:text="It's a duck!" /> 

<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:textSize="20sp" 
android:text="(not a real one)" /> 
</LinearLayout> 

</FrameLayout> 


i 

\ Q 11:43 ■ 

Duck 

1 
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Framelayout: a summary 

Here’s a summary of how you create frame layouts. 

How you specify a frame layout 

You specify a frame layout using <FrameLayout>. You must specify 
the layout’s width and height: 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width= n match_parent" 
android:layout_height="match_parent" 


s/ 


LinearLayout 

FrameLayout 


</FrameLayout> 


Views are stacked in the order they appear 

When you define a frame layout, you add views to the layout in the 
order in which you want them to be stacked. The first view you add is 
displayed on the bottom of the stack, the next view is stacked on top 
of it, and so on. 

Use layoirLgravity to specify where a view appears 

The android: layout_gravity attribute lets you specify where 
you want a view in a frame layout to appear. You can use it to push a 
view to the end, for instance, or sink it to the bottom-end corner. 


Now that you’ve seen how to use two simple Android layouts, 
a linear layout and a frame layout, have a go at the following 
exercise. 
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exercise 



BE 

Three of the five screens Below were 
made from layouts on the next page. 
Your job is to match each of the three 
layouts to the screen that 
the layout would produce. 


Layout Examples 


^ Layout Examples 


^ Layout Examples 


HELLO! 

HI! 
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© 


<LinearLayout xmlns:android= 

"http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
tools:context="com.hfad.views.MainActivity" > 
<Button 

android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:text="HELLO!" /> 

</LinearLayout> 


o 


<LinearLayout xmlns:android= 

"http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.views.MainActivity" > 
<Button 

android:layout_width="match_parent" 
android:layout_height="Odp" 
android:layout_weight="1" 
android:text="HELLO!" /> 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="HI!" /> 

</LinearLayout> 


o 


<LinearLayout xmlns:android= 

"http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.views.MainActivity" > 
<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="HELLO!" /> 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="HI!" /> 

</LinearLayout> 


you are here ► 


195 




solution 


Layout Examples 


BE Lty® u t Soften 

Three of the five screens Below were 
made from layouts on the next page. 
Your job is to match each of the three 
layouts to the screen that 
the layout would produce. 



O Layout Examples 


\iotit the 
layouts produce 
these sheens. 



0 Layout Examples 



<LinearLayout xmlns:android= 

"http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
tools:context="com.hfad.views.MainActivity" > 
<Button 

android:layout_width="match_parent" 
android:layout_height="match_parent" 
android: text="HELLO ! " />^^ 

</LinearLayout> This ^ as 

button that 
-fills the sdv-een. 


£ Layout Examples 


O 



<LinearLayout xmlns:android= 

"http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
tools:context="com.hfad.views.MainActivity" > 

<Button 

android: layout_width="match_parent"^^ 
android: layoutAeight-Odp'" ^ ^ 

android:layout weight="l" , ri 

android: text="HELLO! " /> eavmj spate +ov another 

<Button ^ w »derneath it- 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="HI!" /> 

</LinearLayout> 
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o 


CLinearLayout xmlns:android= 

"http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.views.MainActivity" > 
<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="HELLO!" /> 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="HI!" /> 


</LinearLayout> 




Both buttons have their layout_width 
and layout_hei t properties set to 
"wvap_dontent", so they take up just 
enough spade to display theiv- dontents. 


Layouts and &UI components have a lot in common 

You may have noticed that all layout types have attributes in 
common. Whichever type of layout you use, you must specify 
the layout’s width and height using the android: layout_ 
width and android: layout_height attributes. 

And this requirement isn’t just limited to layouts—the 
android: layout_width and android: layout_ 
height are mandatory for all GUI components too. 

This is because all layouts and GUI components are 
subclasses of the Android View class. Let’s look at this in 
more detail. 
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(rUI components are a type of View 


You’ve already seen that GUI components are all types of views—behind 
the scenes, they are all subclasses of the android. view .View class. 

This means that all of the GUI components in your user interface have 
attributes and behavior in common. They can all be displayed on the 
screen, for instance, and you get to say how tall or wide they should be. 

Each of the GUI components you use in your user interface takes this andv-oidviev/Viev/ ,s 

basic functionality and extends it. dlass o£ all “the ^U| 



Layouts are a type of View called a ViewGroup 

It’s not just the GUI components that are a type of view. Under the hood, 
a layout is a special type of view called a view group. All layouts are 
subclasses of the android. view. ViewGroup class. A view group is a 
type of view that can contain other views. 


A GUI component is a 
type ol view, an object 
that takes up space on 
the screen. 



A layout is a type of 
view group, which is 
a special type of view 
that can contain other 
views. 
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What being a view buys you 

A View object occupies rectangular space on the screen. It includes 
the functionality all views need in order to lead a happy helpful life in 
Androidville. Here are some of the qualities of views that we think are the 
most important: 

fretting and setting properties 

Each view is a Java object behind the scenes, and that means you 
can get and set its properties in your activity code. As an example, 
you can retrieve the value selected in a spinner or change the text 
in a text view. The exact properties and methods you can access 
depend on the type of view. 

To help you get and set view properties, each view can have an 
ID associated with it so that you can refer to it in your code. 

Size and position 

You specify the width and height of views so that Android knows 
how big they need to be. You can also say whether any padding is 
needed around the view. 

Once your view has been displayed, you can retrieve the position 
of the view, and its actual size on the screen. 

Focus handling 

Android handles how the focus moves depending on what the 
user does. This includes responding to any views that are hidden, 
removed, or made visible. 

Event handling and listeners 

Views can respond to events. You can also create listeners so 
that your app can react to things happening in the view. As an 
example, all views can react to getting or losing the focus, and a 
button (and all of its subclasses) can react to being clicked. 


Here are some of the l/iew 
methods you £an use in your 
activity eode. these are in 
the base V \ew elass, theyre 
Common to all views and view 

5**P S - ^ 

android.view.View 

getld() 

getHeightO 

getWidthO 

setVisibility(int) 

findViewByld(int) 

isClickableO 

isFocusedO 

requestFocusO 


As a view group is also a type of view, this means that all layouts and GUI 
components share this common functionality. 
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A layout is really a hierarchy of Views 

The layout you define using XML gives you a hierarchical tree of views 
and view groups. As an example, here’s a linear layout containing a 
button and an editable text field. The linear layout is a view group, and 
the button and text field are both views. The view group is the view’s 
parent, and the views are the view group’s children: 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 



Behind the scenes, when you build your app, the layout XML is 
converted to a ViewGroup object containing a tree of Views. In the 
example above, the button gets translated to a Button object, and 
the text view gets translated to a TextView object. Button and 
TextView are both subclasses of View. 



This is the reason why you can manipulate the views in your layout 
using Java code. Behind the scenes, all of the views are rendered to Java 
View objects. 
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Playing with views 


Let’s look at the most common GUI components. You’ve already seen 
some of these, but we’ll review them anyway. We won’t show you the 
whole API for each of these—just selected highlights to get you started. 


Text view 


This is a text view 


A text view is used for displaying text. 


defining it in XMl 

You define a text view in your layout using the <TextView> element. 

You use android: text to say what text you want it to display, 
usually by using a String resource: 

CTextView 

android:id="@+id/text_view M 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/text" /> 

The TextView API includes many attributes to control the text view’s 
appearance, such as the text size. To change the text size, you use the 
android: textSize attribute like this: 

android:textSize=" 16 sp" 

You specify the text size using scale-independent pixels (sp). Scale- 
independent pixels take into account whether users want to use large 
fonts on their devices. A text size of 16sp will be physically larger on a 
device configured to use large fonts than on a device configured to use 
small fonts. 

Using it in your activity code 

You can change the text displayed in your text view using code like this: 

TextView textView = (TextView) findViewByld(R.id.text_view); 
textView.setText("Some other String"); 


android.view.View 


A 


android.widget.TextView 
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editable text views 



android:layout_height="wrap_content" 
android:hint="@string/edit_text" /> 


You can use the android: inputType attribute to define what type of 
data you’re expecting the user to enter so that Android can help them. As an 
example, if you’re expecting the user to enter numbers, you can use: 


android:inputType="number" 

to provide them with a number keypad. Here are some more of our favorites: 

Value What it does 

phone Provides a phone number keypad. 



V^ou dan -f ind *tV>e entire list “the 
online Android developer dodumentation 
at Irttps://developer.andv-oid.dom/ 
re-ferende/android/Y/idjet/TefctViev/- 
html#attr_android;inputT ype. 


textPassword Displays a text entry keypad, and your input is concealed. 

textCapSentences Capitalizes the first word of a sentence. 


textAutoCorrect Automatically corrects the text being input. 


You can specify multiple input types using the | character. As an example, 
to capitalize the first word of a sentence and automatically correct any 
misspellings, you’d use: 

android:inputType="textCapSentences|textAutoCorrect" 


Using it in your activity code 

You can retrieve the text entered in an editable text view like this: 

EditText editText = (EditText) findViewByld(R.id.edit_text); 
String text = editText.getText() .toString (); 
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Putton 

Buttons are usually used to make your app do something 
when they’re clicked. 

defining it in XMl 

You define a button in XML using the <Button> element. You use 
the android: text attribute to say what text you want the button to 
display: 

<Button 

android:id="0+id/button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/button_text" /> 

Using it in your activity code 

You get the button to respond to the user clicking it by using the 
android: onClick attribute in the layout XML, and setting it to the 
name of the method you want to call in your activity code: 

android:onClick="onButtonClicked" 


Click Me! 


You then define the method in your activity like this: 

/** Called when the button is clicked */ 
public void onButtonClicked(View view) { 

// Do something in response to button click 

} 



Layout 



Activity 


android.view.View 


A 


android.widget.TextView 


A 


android.widget.Button 
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Toggle button 


A toggle button allows you to choose between two states by clicking a button. 


^— VVKcn you eliek 
the toggle 
button it 

dhanges to 

Pefiwing It Ih XMl w '“> “ 

You define a toggle button in XML using the <ToggleButton> element. 

You use the android: textOn and android: textOf f attributes to say 
what text you want the button to display depending on the state of the button: 

<ToggleButton 

android:id="@+id/toggle_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:textOn="@string/on" 
android:textOff="@string/off" /> 


A Compound button 
is a button with 
two states, dhedked 
and uhdbedked. A 

toggle button is an 
implementation ot a 
Compound button. 



Using it in your activity code 

You get the toggle button to respond to the user clicking it by using the 
android: onClick attribute in the layout XML. You give it the name of the 
method you want to call in your activity code: 



android:onClick="onToggleButtonClicked" 
You then define the method in your activity like this: 


^ 'This is e*adtly the same 
as tailing a method when a 
normal button gets tlitked- 


/** Called when the toggle button is clicked */ 


public void onToggleButtonClicked(View view) { 

// Get the state of the toggle button, 
boolean on = ((ToggleButton) view).isChecked(); 
if (on) { ^ 

/ / 0n This returns true it the toggle button is on, 

} else { 

// Off 


and -false i-P the toggle button is o-p-p. 


} 
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Switch 


A switch is a slider control that acts in the same way as a toggle button. 


This is ihc swiieh 
when rt^s o-p-p. 




Off ] 

1 


On 


-This is •the 
swrtdh when 


defining it in XML 


You define a switch in XML using the <Switch> element. You use the 
android: textOn and android: textOf f attributes to say what text 
you want the switch to display depending on the state of the switch: 


<Switch 

android:id="@+id/switch_view" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:textOn="Qstring/on" 
android:textOff="@string/off" /> 


Using it in your activity code 

You get the switch to respond to the user clicking it by using the 
android: onClick attribute in the layout XML, and setting it to the 
name of the method you want to call in your activity code: 

android:onClick="onSwitchClicked" 


You then define the method in your activity like this: 

/** Called when the switch is clicked */ 
public void onSwitchClicked(View view) { 

// Is the switch on? 

boolean on = ((Switch) view).isChecked(); 

T 

This CoAt is very similar *to *tha*t 
used with -the 'fcojjle button- 


} 

} 


if (on) { 
// On 
} else { 

// Off 


android.view.View 


A 


android.widget.TextView 


A 


android.widget.Button 


A 


android.widget. 

CompoundButton 


A 


android.widget.Switch 


you are here ► 


205 




















checkboxes 


Checkboxes 

Checkboxes let you display multiple options to users. They can then select 
whichever options they want. Each of the checkboxes can be checked or 
unchecked independently of any others. 


i£^ Wtrt y/c have two dhetkbox.es. 
Usev-s dan dhoose milk, su^av, 
both milk and su^ar, ov neither- 


defining them in XML 

You define each checkbox in XML using the <CheckBox> element. You 
use the android: text attribute to display text for each option: 

<CheckBox android:id="@+id/checkbox_milk" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/milk" /> 

<CheckBox android:id="@+id/checkbox_sugar" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/sugar" /> 

Using them in your activity code 

You can find whether a particular checkbox is checked using the 
is Che eked () method. It returns true if the checkbox is checked: 




CheckBox checkbox = (CheckBox) findViewByld(R.id.checkbox_milk); 
boolean checked = checkbox.isChecked(); 
if (checked) { 

//do something 

} 
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Checkboxes (continued) 


Just like buttons, you can respond to the user clicking a checkbox by using 
the android: onClick attribute in the layout XML, and setting it to the 
name of the method you want to call in your activity code: 


<CheckBox android:id="@+id/checkbox_milk M 
android:layout_width="wrap_content" 
android:layout_height= n wrap_content" 
android:text="@string/milk" 


android:onClick="onCheckboxClicked"/> 


<CheckBox android:id="@+id/checkbox_sugar 
android:layout_width="wrap_content" 
android:layout_height= n wrap_content" 
android:text="Qstring/sugar" 

android:onClick="onCheckboxClicked"/> 




I* "this case, -the ohChedkboxCkkedO 
method will jet called ko matter 
whieh eheekbox jets dieked- IVe 
to\A& bave spe^i-fied a di-P-Pere^t 
method -Po\r eaeh eheekbox i-P we ; d 
waited to. 


You then define the method in your activity like this: 

public void onCheckboxClicked(View view) { 

// Has the checkbox that was clicked been checked? 
boolean checked = ((CheckBox) view).isChecked(); 


// Retrieve which checkbox was clicked 
switch(view.getld()) { 

case R.id.checkbox_milk: 
if (checked) 

// Milky coffee 

else 

// Black as the midnight sky on a moonless night 
break; 

case R.id.checkbox_sugar: 
if (checked) 

// Sweet 

else 

// Keep it bitter 
break; 

} 

} 
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Radio buttons 


These let you display multiple options to the user. The user can select a single 
option. 


I® Cavemen Astronauts' 


defining them in XML 


Use radio bu-btoKS bo 
resbridb bbe user*s 
dbo'ide bo jusb one 
ofbiorv 


You start by defining a radio group, a special type of view group, using the 
<RadioGroup> tag. Within this, you then define individual radio buttons 
using the <RadioButton> tag: 


<RadioGroup android:id="@+id/radio_group" 

android:layout_width="match_parent" ybu da* dboose bo 

android:layout_height="wrap_content" display bbe radio 

android: orientation="vertical"> - buttons in a borizonbal 

or vertical list. 

<RadioButton android:id="@+id/radio_cavemen" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/cavemen" /> 


<RadioButton android:id="@+id/radio_astronauts" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/astronauts" /> 
</RadioGroup> 



Using them in your activity code 

You can find which radio button is selected using the 
getCheckedRadioButtonld () method: 

RadioGroup radioGroup = (RadioGroup) findViewByld(R.id.radioGroup); 
int id = radioGroup.getCheckedRadioButtonld(); 
if (id == -1){ 

//no item selected 

} 

else { 

RadioButton radioButton = findViewByld(id); 

} 
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Radio buttons (continued) 

You can respond to the user clicking a radio button by using the 
android: onClick attribute in the layout XML, and setting it to the 
name of the method you want to call in your activity code: 

<RadioGroup android:id="@+id/radio_group" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical"> 

<RadioButton android:id="@+id/radio_cavemen" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Qstring/cavemen" 

android:onClick="onRadioButtonClicked" /> 

<RadioButton android:id="@+id/radio_astronauts" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Qstring/astronauts" 

android:onClick="onRadioButtonClicked" /> 

</RadioGroup> 


The radio group 
containing the 
radio buttons 
is a subclass of 
LinearLayout. 
You can use the 
same attributes 


wi 


th a radio 


group as you can 
with a linear 
layout. 


You then define the method in your activity like this: 

public void onRadioButtonClicked(View view) { 

RadioGroup radioGroup = (RadioGroup) findViewByld(R.id.radioGroup); 
int id = radioGroup.getCheckedRadioButtonld(); 
switch(id) { 

case R.id.radio_cavemen: 

// Cavemen win 
break; 

case R.id.radio_astronauts: 

// Astronauts win 
break; 

} 

} 
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Spinner 


As you’ve already seen, a spinner gives you a drop-down list of values 
from which only one can be selected. 


I/Ve saw spiders 
badk in Chapter 2-—^ 



A* Adapter\/iew is a view 
-that ten use an adapter. 
YouMI -find out about 
adapters later in tbe book. 

A 


defining it in XMl 

You define a spinner in XML using the <Spinner> element. 

You add a static array of entries to the spinner by using the 
android: entries attribute and setting it to an array of Strings. 


This is an 

abstract 
base elass tor 
Spinner widgets. 


<Spinner 

android:id="@+id/spinner" 

android:layout_width="wrap_content" 




There are other ways 
ot populating the 
spinner, whidh you II 
see later in the book. 


android:layout_height="wrap_content" 


android:entries="@array/spinner_values" /> 



You can add an array of Strings to strings.xml like this: 

<string-array name="spinner_values"> 

<item>light</item> 

<item>amber</item> 

<item>brown</item> 

<item>dark</item> 

</string-array> 

Using it in your activity code 

You can get the value of the currently selected item by using the 
getSelectedltem () method and converting it to a String: 

Spinner spinner = (Spinner) findViewByld(R.id.spinner); 

String string = String.valueOf(spinner.getSelectedltem()); 


210 Chapter 5 


















views and view groups 


Image view 


You use an image view to display an image: 


A*> image view 
dorrta’ms a* image- 



Adding an image to your project 

You first need to create a drawable resource folder, the default folder for storing 
image resources in your app. To do this, select the app/src/main/res folder in your 
project, go to the File menu, choose the New... option, then click on the option 
to create a new Android resource directory. When prompted, choose a resource 
type of “drawable”, name the folder “drawable”, and click on OK. You then 
need to add your image to the app/src /main/res /draw able folder. 

If you want, you can use different image files depending on the screen density 
of the device. This means you can display higher-resolution images on higher- 
density screens, and lower-resolution images on lower-density screens. To do this, 
you create different drawable folders in app/src/main/res for the different screen 
densities. The name of the folder relates to the screen density of the device: 





The ImageView class is a 
direct subclass o£ \/iew. 


drawable-ldpi 
drawable-mdpi 
drawable-hdpi 
drawable-xhdpi 
drawable-xxhdpi 
drawable-xxxhdpi 


Low-density screens, around 120 dpi. 

Medium-density screens, around 160 dpi. 

High-density screens, around 240 dpi. 
Extra-high-density screens, around 320 dpi. 
Extra-extra-high-density screens, around 480 dpi. 
Extra-extra-extra high-density screens, around 640 dpi. 


Depending on what version o-P 
Android Studio youVe running, the 
IDE may create some ot these 
-Polders tor you automatically. 


You then put different resolution images in each of the drawable* folders, making 
sure that each of the image files has the same name. Android decides which 
image to use at runtime, depending on the screen density of the device it’s 
running on. As an example, if the device has an extra-high-density screen, it will 
use the image located in the drawable-xhdpi folder. 

If an image is added to just one of the folders, Android will use the same image 
file for all devices. If you want your app to use the same image regardless of 
screen density, you’d normally put it in the drawable folder. 
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Image view: the layout XML 

You define an image view in XML using the <ImageView> element. 

You use the android: src attribute to specify what image you want to 
display, and the android: contentDescription attribute to add a 
String description of the image so that your app is more accessible: 

cimageView 

android:layout_width="200dp" 
android:layout_height= n 100dp" 

android:src="@drawable/starbuz z_logo" 

android:contentDescription="@string/starbuzz_logo" /> 

The android: src attribute takes a value of the form "@drawable/ 
image_name", where image_name is the name of the image 
(without its extension). Image resources are prefixed with @drawable, 
which tells Android that it’s an image resource located in one or more 
of the draw able* folders. 

Using image views in your activity code 

You can set the image source and description in your activity code using 
the setlmageResource() and setContentDescription() 
methods: 

ImageView photo = (ImageView)findViewByld(R.id.photo); 
int image = R.drawable.starbuzz_logo; 

String description = "This is the logo"; 

photo.setlmageResource(image); 

photo.setContentDescription(description); 

This code looks for the image resource called starbuz z_logo in the 
drawable * folders, and sets it as the source of an image view with an ID 
of photo. When you need to refer to an image resource in your activity 
code, you use R. drawable . image_name where 
image_name is the name of the image (without its extension). 
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Adding images to buttons 


In addition to displaying images in image views, you can also display 
images on buttons. 


displaying text and an image on a button 

To display text on a button with an image to the right of it, use the 
android: drawableRight attribute and specify the image to be 
used: 


<Button 

android:layout_width="wrap_content" 
android:layout_height= n wrap_content" ^ 

android:drawableRight= M ©drawable/android" 

android:text="©string/click_me" /> 

If you want to display the image on the left, use the 
android: drawableLeft attribute: 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:drawableLeft="©drawable/android" 

android:text="@string/click_me" /> 


Display the android imay resouv-de 
■the rio>ht side ot the button- 


^ \ 

You dan also use dva*/able£-fcav~t 
and dv-au/ablcEnd "to suppovt 
*to—le-Pt languages. 

k 

CLICK ME I 


Use the android: drawableBottom attribute to display the image 
underneath the text: 


<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:drawableBottom= M ©drawable/android" 

android:text="©string/click_me" /> 

The android: drawableTop attribute displays the image above the 
text: 



<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:drawableTop="@drawable/android M 

android:text="©string/click_me" /> 
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Image button 

An image button is just like a button, except it contains an 
image and no text. 

defining it in XML 

You define an image button in XML using the <ImageButton> 
element. You use the android: src attribute to say what image you 
want the image button to display: 

<ImageButton 

android:id="@+id/button n 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:src="@drawable/button_icon" /> 

Using it in your activity code 

You get the image button to respond to the user clicking it by using the 
android: onClick attribute in the layout XML, and setting it to the 
name of the method you want to call in your activity code: 

android:onClick="onButtonClicked" 






The Ua^eM-to* ^ 
e%*teir\ds -the |ma$e\/’»e>w tlass, 
no't -the tlass. 


You then define the method in your activity like this: 

/** Called when the image button is clicked */ 
public void onButtonClicked(View view) { 

// Do something in response to button click 

} 



Layout 



Activity 
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Scroll view 


If you add lots of views to your layouts, you may have problems 
on devices with smaller screens—most layouts don’t come with 
scrollbars to allow you to scroll down the page. As an example, when 
we added seven large buttons to a linear layout, we couldn’t see all of 
them. 


Linear layouts don't 
with sdrollbars. WKcn we 

tried to display seven 
buttons in a linear layout 
on our device) we touldn t 
see them all* 


To add a vertical scrollbar to your layout, you surround your existing 
layout with a <ScrollView> element like this: 

<ScrollView xmlns:android= M http://schemas.android.com/apk/res/android 
xmlns:tools= M http://schemas.android.com/tools 

android:layout_width="match_parent" 
android:layout_height= n match_parent M 

tools:context= M com.hfad.views.MainActivity" > 



© ▼ A Q 13:40 ■ 

w 

* ’ Layout Examples 







i 


rr^B 




<1 O 

□ 


J-UXU 

/ 


/Wove these attributes from the original 
layout to the <£erolH/iew>, as the 
<Serolll/iew> is now the root element- 


<LinearLayout 

android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="16dp" 
android:paddingLeft="16dp" 
android:paddingRight="16dp M 
android:paddingTop= M 16dp" 
android:orientation="vertical" > 

</LinearLayout> 

</ScrollView> 

To add a horizontal scrollbar to your layout, wrap your existing 
layout inside a <HorizontalScrollView> element instead. 


Wrapping our layout in a 
<£troll\/iew> has addled a neat 
vertical scrollbar- The user can 
now get to all of the views. 
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Toasts 


There’s one final widget we want to show you in this chapter: a 
toast. A toast is a simple pop-up message you can display on the 
screen. 

Toasts are purely informative, as the user can’t interact with them. 
While a toast is displayed, the activity stays visible and interactive. 
The toast automatically disappears when it times out. 

Using it in your activity code 

You create a toast using activity code only. You can’t define one in 
your layout. 

To create a toast, you call the Toast. make Text () method, and 
pass it three parameters: a Context (usually this for the current 
activity), a CharSequence that’s the message you want to display, 
and an int duration. Once you’ve created the toast, you call its 
show () method to display it. 





-toas-t isnt actually a 
-type o£ view. Its a use-ful 
way o£ displaying a short 
message *to the user, though, 
so weVe S»eakm$ it into 
this ehaptev. 


Here’s the code you would use to create a toast that appears on 
screen for a short duration: 

CharSequence text = "Hello, I'm a Toast!"; 
int duration = Toast.LENGTH_SH0RT; 

Toast toast = Toast.makeText(this, text, duration); 
toast.show(); 


A toast is a message 
that pops up like 
toast in a toaster. 


By default, the toast appears at 
the bottom o£ the street 

V 


Hello, I'm a Toast! 
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views and view groups 



It’s time for you to try out some of the views we’ve introduced you to this chapter. Create a 
layout that will create this screen: 


You probably won't want to write the 
Code l»ene, bot xby not enpcnWnt in tbe 
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solution 



ExeRctSe 


ilittOH 


Here’s one of the many ways in which you can create the layout. Don’t worry if your code looks 
different, as there are many different solutions. 


<L'mearLayou-t %r^Ks:ar\droid—”b-t*tp : //sdber*as.ar\droiddoinr\/apk/res/android” 

%r*lir\s:-tools—”b-t*tp : //sdberKas.ar\droiddor*/"tools” 

ahdv-oid : layou-t_wid-tk= 1 ”ma-tdh - _pav*cr\-t w 
a^droid'layou-t^hci^h-t—”ma-tdh_pav-cr\-t w 
ahdv-oidfadd'mg—”1 Mp” 
ahd\roid : o\rich-ta-tioir>=-”vc\r-ti6al” 

-tools:dor\ic%i—dom.h'fad layouic^ampIcs.yi/Ia'mA^'t^i'ty' > 


<Te*-t\/iey/ 

android- layout_wi d*tb—”v/rap__dor\-ter\-t W 
ar\droid'layout3 c, 9^^ ,>wr ap — dor\-tcr\i” 
android : -te%-t—”ttoy/ do you like your -tea served?” /> 


^ToggleButtofi 


l/Ve used a -toggle bu-bton -to display y/he-ther 
tbe drink should be served bo-t or eold- 


android : layou*t_widbb—”wrap_£on-te*-t” 
a^droid'layou-t^beigb-t—^y/rap^£orrterrt W 
ar\dr oi d'-te^-tOh—”tto*t w 
ar\droid : 'te%'tO'f'f—”Cold” /> 
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We used a 
dhedkbo* -Por 
eadb o( -the 
values (Milk, 
Sugar, and 
Lemon). We 
fui eadh one 
on a separa-te 
row. 



<CbedkBo% android-id—'^+id/dbedkbo%_rnilk” 
android : layout_widib—”wrap__don*ten*t” 
android : layout_beigbt—”wrap__don*ten*t” 
andv-oid:te*i—'Milk” /> 


<CbedkBo% andvoid-id—'^+id/dbedkbo%_sugar” 
andv-oid:layoui_widib—”y/v-ap_donieni” 
android : layout_beigbt—”wrap__don*ten*t” 
android:te*t—"Sugar” /> 

<CbedkBo% android^id—'^+id/dbedkbo%_lemon” 
android : layout_widtb—”Y/rap__don*ten*t” 
android : layou*t - _beigb*t =1 ”>wrap - _don*tcn't” 
android : *tcx.*t :i:1 ”Lemon” /> 



o Layout Examples 


How do you like your tea served? 
Hot 

[vf Milk 
[vf Sugar 
Lemon 



</Lmeav-Layout> 


Remembev, your dode «<ay look different from 
owrs. This is just one way of buildmoj tbe layout. 
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Your Android Toolbox 


You’ve got Chapter 5 under 
your belt and now you’ve 
added views and view groups 
to your toolbox. 


You ta* download 
iKe -full tode -for 
-tKe tKafter £v-o"« 
Wfcfaps/AtiW/urUom/ 
HeadPirs-tAndroid- 



BULLET POINTS 


■ GUI components are all types of 
view. They are all subclasses of the 

android. view. View class. 


android: gravity lets you say 
where you want the contents to appear 
inside a view. 


All layouts are subclasses of the 
android. view. ViewGroup class. 
A view group is a type of view that can 
contain multiple views. 

The layout XML file gets converted to a 
ViewGroup containing a hierarchical 
tree of views. 

A linear layout lists views either 
horizontally or vertically. You 
specify the direction using the 

android: orientation attribute. 

A frame layout stacks views. 

Use android:padding* attributes 
to specify how much padding you want 
around a view. 

In a linear layout, use 

android: layout_weight if you 

want a view to use up extra space in the 
layout. 

android: layout_gravity lets 
you say where you want views to appear 
in their available space. 


■ <ToggleButton> defines a toggle 
button that allows you to choose between 
two states by clicking a button. 

■ <Switch> defines a switch control that 
behaves in the same way as a toggle 
button. It requires API level 14 or above. 

■ <checkBox> defines a checkbox. 

■ To define a group of radio buttons, 
first use <RadioGroup> to define 
the radio group. Then put individual 
radio buttons in the radio group using 

<RadioButton>. 

■ Use <ImageView> to display an 
image. 

■ <imageButton> defines a button with 
no text, just an image. 

■ Add scrollbars using <Scrollview> 
or <HorizontalScrollView>. 

■ A Toast is a pop-up message. 
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6 constraint layouts 

^ Put Things in Their Place + 



Let’s face it, you need to know how to create great layouts. 

If you’re building apps you want people to use, you need to make sure they look exactly 
the way you want. So far you’ve seen how to use linear and frame layouts, but what 
if your design is more complex? To deal with this, we’ll introduce you to Android’s new 
constraint layout, a type of layout you build visually using a blueprint. We ll show you 
how constraints let you position and size your views, irrespective of screen size and 
orientation. Finally, you’ll find out how to save time by making Android Studio infer and 
add constraints on your behalf. 


this is a new chapter 
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nesting inefficiencies 


Nested layouts can be inefficient 


You’ve seen how to build a simple user interface using linear layouts 
and frame layouts, but what if you need to create something more 
complex? While complex UIs are possible if you nest your linear and 
frame layouts deep enough, they can slow down your app and make 
your code hard to read and maintain. 


As an example, suppose you wanted to create a layout containing two 
rows, each containing two items. One possibility would be to create this 
layout using three linear layouts: one linear layout at the root, and one 
nested linear layout for each row: 


Lihcav layouts only allow you to 
display views ih a single dolur** or vow, 
so you lan’i use a single linear layout —^ 
to £o*sWt layouts like this, You 
tan, however, nest linear layouts to 
produce the results you need. 



For this layout, you 
fcould use one linear 
layout at the root, 
and one nested linear 
layout -for eath row. 


When Android displays a layout on the device screen, it creates a 
hierarchy of views based on the layout components which helps it 
figure out where each view should be placed. If the layout contains 
nested layouts, the hierarchy is more complex, and Android may need 
to make more than one pass through the hierarchy: 



While the above hierarchy is still relatively simple, imagine if you 
needed more views, more nested layouts, and a deeper hierarchy. This 
could lead to bottlenecks in your app’s performance, and leave you 
with a mass of code that’s difficult to read and maintain. 

If you have a more complex UI that requires you to nest multiple 
layouts, it’s usually better to use a different type of layout. 
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constraint layouts 


Introducing the constraint layout 

In this chapter we’re going to focus on using a new type of layout called 
a constraint layout. This type of layout is more complex than a 
linear or frame layout, but it’s a lot more flexible. It’s also much more 
efficient for complex UIs as it gives you a flatter view hierarchy, which 
means that Android has less processing to do at runtime. 

You design constraint layouts VISUALLY 

Another advantage of using constraint layouts is that they’re specifically 
designed to work with Android Studio’s design editor. Unlike linear 
and frame layouts where you usually hack direct in XML, you build 
constraint layouts visually. You drag and drop GUI components onto 
the design editor’s blueprint tool, and give it instructions for how each 
view should be displayed. 

To see this in action, we’re going to take you on a tour of using a 
constraint layout, then build the following UI: 


To build constraint 
layouts using the 
visual tools, you need 
Android Studio 2.3 
or above. II you’re 
using an older version, 
check lor updates. 


This is a 
~Te*il/iew. 


i CJ 

Q 11:43 

Q My Constraint Layout 



' To: Enter email address 

Ar 

Subject 


-These ave Edi-tTe*ts -that till 
•the available horizontal spate- 

Message-^ T h e M BdiiTe^i 
-Pills its available spate 
horizontally and vertically. 


Send 


The Send button appears 
~ at the bottom o-P the 
screen in the Center. 


Create a new project 

We’ll start by creating a new Android Studio project for an application 
named “My Constraint Layout” with a company domain of “hfad.com”, 
making the package name com. hf ad. myconstraintlayout. The 
minimum SDK should be API 19 so that it will work on most devices. 
You’ll need an empty activity called “MainActivity” with a layout 
called “activity_main” so that your code matches ours. Make sure you 
uncheck the Backwards Compatibility (AppCompat) option 
when you create the activity. 
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Make sure your project includes 
the Constraint Layout Library 

Unlike the other layouts you’ve seen so far, constraint layouts come 
in their own library, which you need to add to your project as a 
dependency before you can use it. Adding a library as a dependency 
means that the library gets included in your app, and downloaded to 
the user’s device. 

It’s likely that Android Studio added the Constraint Layout Library to 
your project automatically, but let’s check. In Android Studio, choose 
File—^Project Structure. Then click on the app module and choose 
Dependencies. You’ll be presented with the following screen: 



If Android Studio has already added the Constraint Layout 
Library for you, you will see it listed as “com.android.support. 
constraint:constraint-layout,” as shown above. 

If the library hasn’t been added for you, you will need to add it 
yourself. To do this, click on the “+” button at the bottom or right 
side of the Project Structure screen. Choose the Library Dependency 
option, and select the Constraint Layout Library option from the list. 

If you don’t see it listed, type the following text into the search box: 

YOU OY\ ly need bo type this in it 

com. android, support. constraint: constraint-layout : 1.0.2 ^—"the Constraint Layout Library 

hasn't alveady been added to 

When you click on the OK button, the Constraint Layout Library your project as a dependency- 

should be added to the list of dependencies. Click on OK again to 
save your changes and close the Project Structure window. 

Now that we know that our project contains the Constraint Layout 
Library, let’s add the String resources we’ll need for our layout. 
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constraint layouts 


Add the String resources to $tring$.xml 


Each of the views in our layout will display text values or hints, 
so we’ll add these as String resources. Add the String values 
below to strings, xml: 


□ 

MyConstraintLayout 

MU 


<string name="to_label">To:</string> 

<string name="email_hint">Enter email address</string> 
<string name= M subject_hint M >Subject</string> 

<string name="message_hint">Message</string> 

<string name="send_button">Send</string> 


app/src/main 

HB 

values 



strings.xml 



Now that we’ve added our String resources, we’ll update the 
layout. 


Change activity_wain.xwl to use a constraint layout 


We’re going to use a constraint layout. To do this (and to make 
sure that your layout matches ours), update your code in activity_ 
main.xml to match the code below (our changes are in bold): 


This is how 
you define 3 
dons-brain-t 
layout 



<?xml version="1.0" encoding="utf-8"?> 

<android.support.constraint.ConstraintLayout 

xmlns:android="http://schemas.android.com/apk/res/android 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 

tools:context="com.hfad.myconstraintlayout.MainActivity"> 


□ 

MyConstraintLayout 

43 

app/src/main 

MB 


res 


43 

layout 


activity_ 
main.xml 


</android.support.constraint.ConstraintLayout> 


• It Android Studio added any 
extra views -for you, delete then 


This defines a constraint layout to which we can add views. 
We’ll do this using the design editor’s blueprint tool. 
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use the blueprint 


Use the blueprint tool 



To use the blueprint tool, first switch to the design view 
of your layout code by clicking on the Design tab. Then 
click on the Show Blueprint button in the design editor’s 
toolbar to display the blueprint. Finally, drag a Button 
widget from the design editor’s palette to the blueprint. 
This adds a button to your layout: 

C\'\tV. OY\ 


•the Show Blueprint button to display 


the blueprint and make it nife and bis- 


Activity .java « m activity, main, xml n 


HevVs bbe 
Bubbon* 

widgeb 
in bbe 
palebbe- 


\ku dan 
indvease 
-tbc siz_e — 
o( bbe 
palebbe 
by dlidkin^ 
on bbis 
area and 
d'rajjinj 
downward- 


| Ab TextView 

jfoK ^ _ 

B leButton 
E CheckBox 
® RadioButton 
V CheckedTextView 
= Spinner 
O ProgressBar 
— ProgressBar [Horizontal) 
-* SeekBar 
-• SeekBar (Discrete) 

H QuickContactBadge 


pat strir^j! 

Q. ft’ IP- EEdlhjl 'S?’ I □ Nexus 4 ’ * 25 - 
"ZTtt''; * . * ; _ is i _ ■— 


* u + + ; s ^ 

0 100 200 

Dv-a$ a bubbon bo bbe blueprinb 


Language ^ JjjjT 
© 43% © E3 4| 


Button 


Button 


nstraint Layout 

button - "Button" 


Wert S OUV" 

bubbon. 


You dan dvaj views 
anywhere in bbe 
blueprints main area- 


This area 
marks oub 
where any 
bars ab 
bbe bop 
o-f your 
app will be 
displayed- 


This marks 
oub an 
area -for 
your main 
devide 
bubbons. 
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constraint layouts 


Position views using constraints 


With a constraint layout, you don’t specify where views should be 
positioned by dropping them on the blueprint in a particular place. 
Instead, you specify placement by defining constraints. A constraint 
is a connection or attachment that tells the layout where the view should 
be positioned. For example, you can use a constraint to attach a view to 
the start edge of the layout, or underneath another view. 

Well add a horizontal constraint to the button 


To see how this works, let’s add a constraint to attach our button to the 
left edge of the layout. 


First, make sure the button’s selected by clicking it. When you select a 
view, a bounding box is drawn around it, and handles are added to its 
corners and sides. The square handles in the corners let you resize the 
view, and the round handles on the sides let you add constraints: 


When you select a 
view, a bounding box 
is drawn diround it 



Use -the square handles at the 
dovnevs to resize the view- 

Use the round handles on the 
sides to add donstv-aints. 


To add a constraint, you click on one of the view’s constraint handles 
and drag it to whatever you want to attach it to. In our case, we’re going 
to attach the left edge of the button to the left edge of the layout, so click 
on the left constraint handle and drag it to the left edge of the blueprint: 


Click on the vound handle on the 
button’s le-Ct side, and drag it to 
■the leti edge of -the blueprint 



This adds the constraint, and pulls the button over to the left: 


The button slides to the 
edge ot the blueprint when 
you add the Constraint. 



That’s how you add a horizontal constraint. We’ll add a vertical 
constraint to the button next. 
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Add a vertical constraint 

Let’s add a second constraint to the button to attach it to the 
top of the layout. To do this, click on the button’s top constraint 
handle, and drag it to the top of the blueprint’s main area. This 
adds the second constraint, and the button slides to the top of the 
main area. 

Each view in a constraint layout must have at least two 
constraints—a horizontal constraint and a vertical one—in order 
to specify where it should be positioned. If you omit the horizontal 
constraint, the view is displayed next to the start edge of the 
layout at runtime. If you omit the vertical constraint, the view 
is displayed at the top of the layout. This is irrespective of 
where the view is positioned in the blueprint. 

Changing the view's margins 



Clidk oh round 
handle on the 
buttons top ed$e> 
and dva$ it to the 
top o( the blueprint- 


When you add a constraint to a view, the design editor 
automatically adds a margin on the same edge as the constraint. 
You can set the size of the default margin in the design editor’s 
toolbar by changing the number in the Default Margin box: 



The button slides 
to the top ot 
the blueprint^ 
r*ain area. 


I 1*- 

m ed ii 


Nexus 4^ AZS ^ ©AppTheme 

Language^ 

□T 

i_i 

Pf 


<& 

+*\ 

I- |r- i* ©43* © o 4 

B 



Change -the number here (in dps) to change the de-fault margin- 


Changing the size of the default margin specifies the size 
of any new margins that get added. The size of any existing 
margins remain unchanged, but you can change these using the 
property window. 

The property window is displayed in a separate panel at the 
side of the design editor. When you select a view, it displays 
a diagram featuring the view’s constraints and the size of its 
margins. To change the size of a margin, you change the 
number next to the relevant side of the view. 

You can also change the size of a view’s margins by clicking 
and dragging the view in the blueprint. This technique has the 
same effect as changing the size of the margin in the property 
window, but it’s harder to be precise. 

Try changing the size of both margins using each method 
before looking at the next page. 


This is -the property window- 

't' 


left Side, in 
ibis dase 9. 



Properties 

This is -the ^ id 

£ohst\raiht 

oh the view s 
le-Pt side- 


This is the 
siz£ o£ the 
mav-^ih Oh the 


This represents the view. 
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constraint layouts 


Changes to the blueprint 
are reflected in the XML 

When you add views to the blueprint and specify constraints, these 
changes are reflected in the layout’s underlying XML. To see 
this, switch to the text view of your code. Your code should look 
something like this (but don’t worry if it’s slightly different): 


<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 


. . . > 

The design editor's added a button. 

<Button 



These are all 
attributes you've 
seeh be-Pore- 


{ android:id="@+id/button" 

android:layout_width="wrap_content" 
android:layout_height="wrap_content M 
android:layout_marginLeft="8dp" 
android:layout_marginTop= M 32dp M 
android:text= M Button" 


□ 

MyConstraintLayout 

ts 

app/sre/main 



layout 



These lines only apply ; a PP= layout_constraintLeft_toLeftOf="parent" 
bo Constraint layouts. /app: layout_constraintTop_toTopOf="parent" /> 


activity_ 

main.xml 


</android.support.constraint.ConstraintLayout> 


As you can see, our XML now includes a button. Most of the 
code for the button should look familiar to you, as it’s material we 
covered in Chapter 5. The button’s width, height, and margins are 
specified in exactly the same way as before. The only unfamiliar 
code is the two lines that specify the view’s constraints on its left and 
top edges: 

<Button> 


app:layout 
app:layout 


constraintLeft_toLeftOf="parent 
constraintTop_toTopOf="parent" 


These lines describe the Constraints 
on the button’s le-ft and top edges. 


Similar code is generated if you add constraints to the button’s 
remaining edges. 

Next, switch your code back to design view, and we’ll look at other 
techniques for positioning your views in a constraint layout. 
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How to center views 

So far you’ve seen how you can use constraints to attach a view 
to the edge of its layout. This works well if you want to position a 
view in the top-left corner, for example, but what if you want to 
position it in the center? 

To position views in the center of its layout, you add constraints 
to opposite sides of the view. Let’s see how this works by centering 
our button horizontally. 

Make sure the button is selected, then click on the constraint 
handle on its right edge, and drag it to the right edge of the layout: 



Click on ike Constraint handle on ike 
button s v-i^ki ed^e, and dra$ it io 
ike vi^hi edoje ok ike blueprint 


This adds a constraint to the view’s right edge. As the button 
now has two horizontal constraints, one on each side, the button 
is pulled to the center, and the two opposing constraints are 
displayed in the blueprint as springs: 



Cons'tvam'U on opposite 
sides o-f a view are 
displayed as springs. 


As the button is now attached to both sides of the layout, it’s 
displayed in the center irrespective of screen size or orientation. 
You can experiment with this by running the app, or changing 
the size of the blueprint by dragging the blueprint’s bottom-right 
corner: 



You £an \resiz* -the blueprint 
by disking and dragging its 
bottom-right Corner. 
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Adjust a view's position by updating its bias 

Once you’ve added constraints to opposite sides of your view, you can 
control where it should be positioned relative to each side by changing 
its bias. This tells Android what the proportionate length of the 
constraint should be on either side of the view. 


To see this in action, let’s change our button’s horizontal bias so that 
it’s positioned off-center. First, make sure the button’s selected, then 
look in the view’s property window. Underneath the diagram of the 
view, you should see a slider with a number in it. This represents the 
view’s horizontal bias as a percentage: 


The view's property window 
shows we've added donstrain-b 
■fco i'ts le-f-t and vijh't edjes. 


1 

— z— 

| % % % 


g a\ 

r ? ? ? SA \ 1 

* 

m 



This slider is -Cor -the view's 
horizontal bias. It duvvently displays 
<50 as the view is displayed haltway 
between its horizontal donstraints. 


To change the value of the bias, simply move the slider. If you move 
the slider to the left, for example, it moves the button in the blueprint 
to the left too: 


Alovina 
the 
slider.. 



...moves ‘ 
the 

button- 


—/WWW® 


The view maintains this relative position irrespective of screen size 
and orientation. 


IWWWWWWWVVWVWVWAWVW— 



You ean also move the button 
by diking and dragging it, but 
that te£hni^ue is less a££urate. 


When you add a bias to a view in the design editor, this is reflected 
in the underlying XML. If you change the horizontal bias of your 
view to 25%, for example, the following code gets added to the 
view’s XML: 


app:layout_constraintHorizontal_bias="0.25" 

Now that you know how bias works, let’s look at how you specify a 
view’s size. 
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How to change a view's size 


With a constraint layout, you have several different options for 
specifying a view’s size: 


o 

o 

o 

o 


Make it a fixed size by specifying a specific width and height. 

Use wrap_content to make the view just big enough to display its contents. 

Tell it to match the size of its constraints (if you’ve added constraints to 
opposite sides of the view). 

Specify a ratio for the width and height so that, for example, the view’s width is 
twice the size of its height. 


We’ll go through these options one-by-one. 


1. Make the view a fixed size 


There are a couple of ways of using the design editor to make 
the view a fixed size. One way is to simply resize the view in the 
blueprint by clicking and dragging the square resizing handles on its 
corners. The other way is to type values into the layout_width 
and layout_height fields in the properties window: 


Yoia dah resize a View 
usi*g -the square resizing 
handles oh its dorhers. 




You dah also 
harddode the 
width ahd height 
ih the view s 
proper-ty wihdow. 


In general, making your view a fixed size is a bad idea, as it 

means the view can’t grow or shrink to fit the size of its contents or 
the size of the screen. 


1 . Make it just big enough 

To make the view just large enough to display its contents, change the 
view’s layout_width and layout_height properties to wrap_ 
content. You do this in the view’s property window as shown here: 


Setting -the width ahd heigh-t to 
wrap_dontent” makes i-t jus-t large 
ehough ho display i-fcs don-ten-ts, jus-t 
as i-t does ih o-ther layou-ts. 
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3. Match the view's constraints 

If you’ve added constraints to opposite sides of your view, you can 
make the view as wide as its constraints. You do this by setting its 
width and/or height to Odp: set its width to Odp to get the view to 
match the size of its horizontal constraints, and set its height to Odp 
to get it to match the size of its vertical constraints. 

In our case, we’ve added constraints to the left and right sides of 
our button, so we can get the button to match the size of these 
constraints. To do this, go to the view’s property window, and 
change the layout_width property to Odp. In the blueprint, the 
button should expand to fill the available horizontal space (allowing 
for any margins): 



Set the width 
to Odp, and the 

button is sized - 
to r*atdh its 
donstvaints. 


1 



4. Specify the width:height ratio 


Finally, you can specify an aspect ratio for the view’s width 
and height. To do this, change the view’s layout_width or 
layout_height to Odp as you did above, then click in the top-left 
corner of the view diagram that’s displayed in the property window. 
This should display a ratio field, which you can then update: 


Clidk here to 
toggle the view s 
aspedt ratio. 




Now that you’ve seen how to resize a view, try experimenting with the 
different techniques before having a go at the exercise on the next page. 
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exercise 



BE fjte CoriSftiijnf 

Your job is to play like you’re the 
constraint layout and draw the constraints 
that are needed to produce each layout. 

You also need to specify the 
layoutwidth, layoutJieight, 
and bias (when needed) for 
each view. Weve completed 
the first one for you. 


need to add the views and 
Constraints to each blueprint 




0 My Constraint Layout 




i 0 ^ Q 10:19 ■ 

0 My Constraint Layout 


A button's dentev-ed at 
tbe bottom of *tbc sdv-een- 




layout_v/idtb: y/rap_dontcnt 
layout__bei()bt : v/v-ap__dontent 
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© 


The button -Pills -the available spade- 

i 


i □ 

*Jt Q 10:29 ■ 

0 My Constraint Layout 

■id 



© 


i □ 

^ Q 10:38 ■ 

0 My Constraint Layout 



Button 1 Button 2 


Button I is displayed 
in -the bof-le-Pb dovnev- 
Button 2- -Pills “the 
remaining hoviz^nbal spade- 
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solution 



BE f]i& C©n^{x^n{ S©|ufl©ti 

Your job is to play like you’re the 
constraint layout and draw the constraints 
that are needed to produce each layout. 

You also need to specify the 
layouLwidth, layoutJieight, 
and bias (when needed) for 
each view. Weve completed 
the first one for you. 


My Constraint Layout 




layout_widtb: y/rap_dor\*tcrrt 
layout_height wrap__dontent 



i D 


*a Q 10:19 ■ 


0 My Constraint Layout 


A button s dentev-ed at 
tbc bottom of tbe Screen- 



Adding 

C.onst'rain'ts to 
eadh vertical 
edge and setting 
tbe bias to 
50 % v/i|| eentev- 
tbe button 

T* 




-AA/V^r^ 




layout_>widtb: u/rap_dontent 
layout_beigbt : v/irap__dontent 
bias: *50% 
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© 


The bu-tbn -Pills -the available spade- 

i 


i □ 

*Jt Q 10:29 1 

0 My Constraint Layout 




Button 






© 


o M y 


Button 1 

Button I is displayed 
in -the iop-le-Pi dorner- 
Button Z -Pills “the 
remaining horizontal spade- 


Constraint Layout 


Button 2 




Butt OY\ I- 

layout_wid*th: wrap__dontent 
layout_height wrap__dontent 


Button 2-- 
layou-t__y/id-th- Odp 
layout_height : v/rap__dontent 

To intake Button Z -Pill -the 
remaining horizontal spade, 
we add donstrain-ts to eadh 
vertidal edge and set ib 
wid-th to Odp- lb le-Pt edge is 
attadhed b Button I’s right 
edge- 
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How to align views 


So far you’ve seen how to position and size a single view. Next, 
let’s examine how you align it with another view. 

First, click on the Show Constraints button in the design edit 
toolbar to display all the constraints in the blueprint (not just the 
ones for the selected view). Then drag a second button from the 
palette to the blueprint, and place it underneath the first: 



This is -the Show Corstra'mb 
bulW Clidk'm5 on it shows 
(or hides) all the donstra'mts 
in the layout- 


Add a second button 
to the blueprint, 
underneath the -f irst. 



To display the second button underneath the first when the app 
runs, we need to add a constraint to the second button’s top edge, 
and attach it to the first button’s bottom edge. To do this, select 
the second button, and draw a constraint from its top edge to the 
bottom edge of the other button: 

This adds a constraint attaching the top - 
one button to the bottom ed^e of the other- 


i L—J 

hS 


To align the left edges of both buttons, select both buttons by 
holding down the Shift key when you select each one, then click 
on the Align Left Edges button in the design editor toolbar: 



Clicking on “this 
button gives you 
different options 
-for aligning views. 



Aligning the 
view s lett 
edges adds 
another 
Constraint 


This adds a constraint from the left edge of the second button to 
the left edge of the first, and this constraint aligns the view’s edges. 
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Let's build a real layout 

You now know enough about constraint layouts to start building a 
real one. Here’s the layout we’re going to create: 


This is a 
Tcxtl/iew. 

These are Edi'tTex'b 
that -fill the available 
horizontal spade- 


Q My Constraint Layout 


To: |Enter email address 



Message 

t 

The Message EditText 
■fills its available spade 
horizontally and vertidally. 


The Send Button appears 
at the bottom of the 
sdreen in the denter. 

- 4 - 

Send 



We’ll build it from scratch in activity_main.xml, so before we get 
started, delete any views that are already in the layout so that the 
blueprint’s empty, and make sure your activity_main.xml code looks 
like this: 



<?xml version="1.0" encoding="utf-8"?> 

<android.support.constraint.ConstraintLayout 

xmlns:android="http://schemas.android.com/apk/res/android 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 

tools:context="com.hfad.myconstraintlayout.MainActivity"> 


MyConstraintLayout 

H3 

app/sre/main 


HT3 


res 


MU 

layout 


activity_ 

main.xml 


</android.support.constraint.ConstraintLayout> 
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First, add the top line of views 

We’re going to start by adding the views we want to appear at 
the top of the layout: a text view and an editable text field. 

To do this, switch to the design editor if you haven’t already 
done so, then drag a TextView from the palette to the top-left 
corner of the blueprint. Next, drag an E-mail component to the 
blueprint so it’s positioned to the right of the text view. This 
is an editable text field that uses Android’s email keyboard for 
data entry. Manually resize the E-mail component so that it 
lines up with the text view and fills any remaining horizontal 
space: 



The top line of tbe layout 
-features a TextView label and an 
EditText -for tbe email address. 



Notice that we haven’t added any constraints to either view yet, 
and we’ve positioned them where we want them to appear when 
the layout’s displayed on a device. There’s a good reason for this: 
to save us some work, we’re going to get the design editor 
to figure out the constraints. 


fret the design editor to infer the constraints 

As you already know, a constraint layout uses constraints to 
determine where its views should be positioned. The great news 
is that the design editor has an Infer Constraints button that’s 
designed to work out what it thinks the constraints should be, 
and add them. To use this feature, simply click on the Infer 
Constraints button in the design editor’s toolbar: 



This is tbe In-fer Constraints 
button. Clitk »t kow. 
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The Infer Constraints feature 
guesses which constraints to add 

When you click on the Infer Constraints button, the design editor tries 
to figure out what the constraints should be and adds them for you. It’s 
not completely foolproof, as it can’t read your mind (as far as we know) 
to determine how you want the layout to behave on a real device. It 
simply guesses based on each view’s position in the blueprint. 

Here are the changes the design editor made for us when we clicked on 
the Infer Constraints button (yours may look different if you positioned 
your views differently): 



Clicking oh -the 
Ih-Pev CohS-t\raihts 
bu-ttoh added —" 

dohs-tv-aihbs bo 
bobh views. 


If you don’t like what the Infer Constraints feature has done, you can 
undo the changes it’s made by choosing Undo Infer Constraints from 
the Edit menu, or adjust individual constraints. 

We’re going to tweak our views before adding more items to the blueprint. 
First, select the text view in the blueprint, then edit its properties in 
the properties panel to give it an ID of to_label and a text value 4C" 
of "@string/to_label". This does the same thing as adding the 
following lines of code to the <TextView> element in the XML: 


ybu dah ebetk bbe 
debails o-f eaeb 
dohsbvaihb by 
seletbih^ eatb view 
ih buVh ahd lookih^ 
ab ibs values ih bhe 
properby wihdow. 


When you update the IP, don't worry 
it Android Studio displays a message 
bellih^ you its ^oih^ bo ^ake tbahjes bo 
the Code We want it to do this because 
- we're than^inj the view's IP- 


Update this property to change 
the Textl/iew's text value- 


android:id="@+id/to_label" 
android:text="@string/to_label' 



Android Sbudio adds bbese lihes 
of todc when you ebahje bbe 
view^s ID ahd bexb value- 


ctVlew 


Next, select the E-mail component EditText, and change its ID to 
email_address, its layout_height to "wrap_content", and 
its hint to "@string/email_hint M . This does the same thing as 
adding these lines to the <EditText> element in the XML: 

android:id="@+id/email_address" 
android:layout_height="wrap_content 
android:hint="@string/email_hint 




Android Sbudio adds bbese lihes of Code wbeh you 
eban^e bbe view’s layoub_bei^bb ahd binb value- 


Now that we’ve added the first line of views to the blueprint, let’s add 
some more. 
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more lines 


Add the next line to the blueprint... 

The next row of the layout contains an editable text field for the 
message subject. Drag a Plain Text component from the palette to 
the blueprint, and position it underneath the two items we’ve already 
added. This adds an Edit Text to the blueprint. Then change the 
component’s size and position so that it lines up with the other views 
and fills the horizontal space: 


i 

Q 11:43 | 

0 My Constraint Layout 





Then click on the Infer Constraints button again. The design editor 
adds more constraints, this time positioning the new component: 



The design edi'fcoir adds 
£ons-t\ra'm-ts "to ihe new 
EdrtTex-t when we diek on 
ihe In-fev* Cons-fo-ainis button. 


Select the new view in the blueprint, and then change its ID to 
subject, its layout_height to "wrap_content", and its hint 
to " @string/sub j ect_hint", and delete any text in the text 
property that the design editor may have added. 


...and then add the button 


Next, we’ll add a button to the bottom of the layout. Drag a Button 
component to the bottom of the blueprint and center it horizontally. 
When you click on the Infer Constraints button this time, the design 
editor adds these constraints to it: 



Change the button’s ID to send_button and its text to 
"@string/send_button". 



-the layout Uni CrtA hov-izorrtally. 


Remember, when you dlidk cm the |Jer 
Constraints button in your layout, it may 
9 'ive you di-f+erent results than shown here. 
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constraint layouts 


Finally, add a view for the message 

We have one more view to add to our layout, an editable text 
field that we want to be able to grow to fill any remaining space. 
Drag a Plain Text component from the palette to the middle of 
the blueprint, change its size so that it fills the entire area, and 
then click on the Infer Constraints button: 



Subject 


Message 


t 

We want -the Message Edi-tText 
f» -fill the remaining area- 


Send 



Note that we dould have added all 
these views in one go, and dlidked the 
Inter Constraints button when we 
readhed the end- Wle've tound, however, 
that building it uy step-by-step gives 
the best results- Why not experiment 
and try this out tor yourselt? 


Select the new component in the blueprint, then change its 
ID to message, its hint to "@string/message_hint n , 
and its gravity to top, and delete any text in the text 
property that the design editor may have added. 


you may need to ekk on th 
-View all proper-ties” button 
•to see -the gravity property 


Let’s take the app for a test drive and see what the layout 
looks like. 



you are here ► 
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test drive 



Test drive the app 


When we run the app, MainActivity’s layout looks almost 
exactly how we want it to. When we rotate the device, the 
button stays centered, the email and subject editable text fields 
expand to fill the horizontal space, and the message view fills the 
remaining area: 


i 

*A Q 11:43 | 

Q My Constraint Layout 



To: |Enter email address 



Test your tonstra'mt layout on a variety 
of devite sizes and orientations to make 
sure it behaves the way you want- It it 
doesn't, you may need to dhan^e the 
properties of some of your views and 
their Constraints. 


Subject 


i □ 

*A Q 11:43 

Q My Constraint Layout 



Message 


The editable text 
-fields s-tre-tch to -Pill 
their available space- 


To: Enter email address 


Subject 

Message 



Send 

_ 

/ 

The button is Centered 
horizontally at the bottom o-f 
the screen irrespective of the 
screen size and orientation- 



Remember that your layout may look and behave differently 
than ours depending on what constraints the design editor added 
when you clicked on the Infer Constraints button. The feature 
isn’t perfect, but it usually takes you most of the way there, and 
you can undo or update any changes it makes. 
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Your Android Toolbox 


You’ve got Chapter 6 under 
your belt and now you’ve 
added constraint layouts to 
your toolbox. 


Yow tan download 
the -full tode -for 
the thaptev- -from 

htt?s : //t<ny<*v-Uonr,/ 

Headf"iv-stAndv-oid- 



BULLET POINTS 


■ Constraint layouts are designed to work 
with Android Studio’s design editor. They 
have their own library and can be used in 
apps where the minimum SDK is API level 
9 or above. 

■ Position views by adding constraints. Each 
view needs at least one horizontal and 
one vertical constraint. 

■ Center views by adding constraints to 
opposite sides of the view. Change the 
view’s bias to update its position between 
the constraints. 


You can change a view’s size to match its 
constraints if the view has constraints on 
opposing sides. 

You can specify a width:height aspect ratio 
for the view’s size. 

Clicking on the Infer Constraints button 
adds constraints to views based on their 
position in the blueprint. 


Is a constraint layout my only 
option if I want to create complex 
layouts? 

There are other types of layout as 
well, such as relative and grid layouts, but 
the constraint layout does everything that 
these do. Also it’s designed to work with 
Android Studio’s design editor, which makes 
building constraint layouts much easier. 

If you’re interested in finding out more 
about relative and grid layouts, they're 
covered in Appendix I at the back of the 
book. 


-there] are no 

Dumb Questions 


Why do constraint layouts have a 
separate library? 


Constraint layouts are a fairly recent 
addition to Android compared to other types 
of layout. They’re in a separate library so 
that they can be added to apps that support 
older versions of Android. You’ll find out 
more about backward compatibility in later 
chapters. 


O: Can I still edit constraint layouts 
using XML? 


Yes, but as they’re designed to be 
edited visually, we’ve concentrated on 
building them using the design editor. 


% 


I tried using the Infer Constraints 
feature but it didn’t give me the results I 
wanted. Why not? 


The Infer Constraints feature can 
only make guesses based on where you 
position views in the blueprint, so it may not 
always give you the results you want. You 
can, however, edit the changes the Infer 
Constraints feature makes to your app. 


you are here ► 
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7 list Views and adapters 


^ Getting Organized ^ 



Want to know how best to structure your Android app? 

You’ve learned about some of the basic building blocks that are used to create apps, 
and now it’s time to get organized. In this chapter, we’ll show you how you can take a 
bunch of ideas and structure them into an awesome app. You'll learn how lists of data 
can form the core part of your app design, and how linking them together can create a 
powerful and easy-to-use app. Along the way, you’ll get your first glimpse of using event 
listeners and adapters to make your app more dynamic. 


this is a new chapter 
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ideas 


Every app starts with ideas 

When you first come up with an idea for an app, you’ll have 
lots of thoughts about what the app should contain. 

As an example, the guys at Starbuzz Coffee want a new app 
to entice more customers to their stores. These are some of 
the ideas they came up with for what the app should include: 


eacV ^ Af ^‘ 




\ 



These are all ideas that users of the app will find useful. 
But how do you take all of these ideas and organize them 
into an intuitive, well-structured app? 
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list views and adapters 


Organize your ideas: 

top-level, category, and detail/edit activities 

A useful way to bring order to these ideas is to organize 
them into three different types of activity: top-level 
activities, category activities, and detail/edit activities. 


Top-level activities 

A top-level activity contains the things that are most 
important to the user, and gives them an easy way of 
navigating to those things. In most apps, the first activity 
the user sees will be a top-level activity. 


Display 8 
start screen 
u)i-th a list 
op-tions. 


Category activities 

Category activities show the data that belongs to a 
particular category, often in a list. These type of activities 
are often used to help the user navigate to detail/edit 
activities. An example of a category activity is a list of all 
the drinks available at Starbuzz. 


display 
a menu 
s>hou)iny all 


-the tood 

Gan but 


ljql 


sboio a list cd 
a\\ our stores. 


i 


Display a list 
o^r the drinKs 
roe sell. 


Petail/edit activities 

Detail/edit activities display details for a particular 
record, let the user edit the record, or allow the user to 
enter new records. An example of a detail/edit activity 
would be an activity that shows the user the details of a 
particular drink. 

Once you’ve organized your activities, you can use 
them to construct a hierarchy showing how the user will 
navigate between activities. 


c£ an \toco 
tood. 


display -the 
address 
and openiny 
-times o-? J 
each store 




Think of an app you'd like to create. What activities should it include? Organize these activities 
into top-level activities, category activities, and detail/edit activities. 
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organize your ideas 


Navigating through the activities 

When you organize the ideas you have into top-level, category, 
and detail/edit activities, you can use this organization scheme 
to figure out how to navigate through your app. In general, you 
want your users to navigate from top-level activities to detail/ 
edit activities via category activities. 


Top-level activities go at 
the top 

These are the activities your user 
will encounter first, so they go at 
the top. 


Display a 
star-t screen 
uoi-th a list o^r 
op-tions. 


Category activities go 
between top-level and 
detail/edit activities 

Your users will navigate from the 
top-level activity to the category 
activities. In complex apps, you 
might have several layers of 
categories and subcategories. 


Petail/edit activities 

These form the bottom layer 
of the activity hierarchy. Users 
will navigate to these from the 
category activities. 


/ i \ 


Display a list 

Display a 

Shouo a list o^r 

o^r the drinhs 

menu shouoiny 

all our stores. 

uo© sell 

all -the tood 



you can buy. 




Shouo detoils 

Shouo detoils 

Display -the 

o^r each drinh. 

o^ an itom o^r 

address and 


tood. 

openiny -times 



ok each store. 


As an example, suppose a user wanted to look at details of one 
of the drinks that Starbuzz serves. To do this, she would launch 
the app, and be presented with the top-level activity start screen 
showing her a list of options. The user would click on the option 
to display a list of drinks. To see details of a particular drink, she 
would then click on her drink of choice in the list. 
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list views and adapters 


Use list views to navigate to data 


When you structure your app in this way, you need a way of navigating 
between your activities. A common approach is to use list views. A 
list view allows you to display a list of data that you can then use to 
navigate through the app. 


As an example, on the previous page, we said we’d have a category 
activity that displays a list of the drinks sold by Starbuzz. Here’s what 
the activity might look like: 



The activity uses a list view to display all the drinks that are sold by 
Starbuzz. To navigate to a particular drink, the user clicks on one of 
the drinks, and the details of that drink are displayed. 


i 

Q 2:28 

Starbuzz 



If you diek on -the Latte 
option in -the list view, you 
ge-t shown -the details for 
the latte. 


Latte 

^ couple of espresso shots with steamed milk 




We’re going to spend the rest of this chapter showing you how to use 
list views to implement this approach, using the Starbuzz app as an 
example. 
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welcome to starbuzz 


part of 

We're going to build the Starbuzz app 

Rather than build all the category and detail/edit activities required 
for the entire Starbuzz app, we’ll focus on just the drinks. 
We’re going to build a top-level activity that the user will see when 
they launch the app, a category activity that will display a list of 
drinks, and a detail/edit activity that will display details of a single 
drink. 


The top-level activity 

When the user launches the app, she will 
be presented with the top-level activity, the 
main entry point of the app. This activity 
includes an image of the Starbuzz logo, and a 
navigational list containing entries for Drinks, 
Food, and Stores. 

When the user clicks on an item in the list, the 
app uses her selection to navigate to a separate 
activity. As an example, if the user clicks 
on Drinks, the app starts a category activity 
relating to drinks. 


i 

V Q 2:27 I 

(3 Starbuzz 



\ZT 

Coffee 


Drinks 





The Starbuzz. 1 050 , and 
a list of options. We II 
implement the Prinks 
option. 


The drink category activity 

This activity is launched when the user 
chooses Drinks from the navigational list in the 
top-level activity. The activity displays a list 
of all the drinks that are available at Starbuzz. 
The user can click on one of these drinks to see 
more details of it. 


i 

Q 2:28 I 

(3 Starbuzz 




Well just use three drinks, 
but were sure Starbuzz. 
serves many more- 
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list views and adapters 


The drink detail activity 

The drink detail activity is launched when the 
user clicks on one of the drinks listed by the 
drink category activity. 

This activity displays details of the drink the 
user has selected: its name, an image of it, and 
a description. 


Q 2:29 ■ 


Starbuzz 




R Starbuzz A 

O Starbuzz 



atte 

couple of espresso shots v 



Cappuccino 

■spresso, hot milk, and < 


How the user navigates through the app 


The user navigates from the top-level activity to the drink category 
activity by clicking on the Drinks item in the top-level activity. She 
then navigates to the drink detail activity by clicking on a drink. 


i 

*°A Q 2:27 1 

(3 Starbuzz 




-lighest quality beans roasted and brewed fresh 

.? 

The drink detail 
activity displays 
details ©-£ the drink 
selected by the user. 



Q 2:28 i 


^tarfewzz 


Latte 

Wf Coffee___ 

Drinks 


Cappuccino 

The user dlidks on 


l/Vhen the user 

Food the Drinks item 


elieks on a drink, 

stores and this displays a 


that drink is then 

list o-f drinks. 


displayed- 


i 

Q 2:29 | 

(3 Starbuzz 



: ilter 

Highest quality beans roasted and brewed fresh 


> -f IP 


you are here ► 


253 































app structure 


The Starbuzz app structure 

The app contains three activities. TopLevelActivity is the app’s 
top-level activity and allows the user to navigate through the app. 
DrinkCategoryActivity is a category activity; it contains a 
list of all the drinks. The third activity, DrinkActivity, displays 
details of a given drink. 

For now, we’re going to hold the drink data in a Java class. In a later 
chapter, we’re going to move it into a database, but for now we want 
to focus on building the rest of the app without teaching you about 
databases too. 

Here’s how the app will work: 


o 


When the app gets launched, it starts activity TopLevelActivity. 

This activity uses layout activity_top_level.xml. The activity displays a list of 
options for Drinks, Food, and Stores. 


o The user clicks on Drinks in TopLevelActivity, which launches 
activity DrinkCategoryActivity. 

This activity uses layout activity_drink_category.xml and displays a list of drinks. It 
gets information about the drinks from the Drink.java class file. 


Q The user clicks on a drink in DrinkCategoryActivity, which 
launches activity DrinkActivity. 

The activity uses layout activity_drink. xml. This activity also gets details about the 
drinks from the Drink.java class file. 



ac t i v i ty_to p_l eve I .xm I 
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list views and adapters 


Here's what we're going to do 

There are a number of steps we’ll go through to build the app: 


© 


Add the Drink class and image resources. 

This class contains details of the available drinks, 
and we’ll use images of the drinks and Starbuzz 
logo in the app. 



© 


Create TopLevelActivity and its layout. 

This activity is the entry point for the app. It needs to 
display the Starbuzz logo and include a navigational 
list of options. TopLevelActivity needs to launch 
DrinkCategoryActivity when the Drinks option is clicked. 



StarWr 

•TCoffee 


Drinks 


Food 




o 


Create DrinkCategoryActivity and its layout. 

This activity contains a list of all the drinks that are 
available. When a drink is clicked, it needs to launch 
DrinkCategory. 


o 


Create DrinkActivity and its layout. 

This activity displays details of the drink the user 
clicked on in DrinkCategoryActivity. 


Create the project 



You create the project for the app in exactly the same way you did 
in the previous chapters. 

Create a new Android project for an application named “Starbuzz” 
with a company domain of “hfad.com”, making the package name 
com. hfad. starbuzz. The minimum SDK should be API 19. 
You’ll need an empty activity called “TopLevelActivity” and a 
layout called “activity_top_level”. Make sure you uncheck the 
Backwards Compatibility (App Comp at) checkbox. 


Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 
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The Prink class 


We’ll start by adding the Drink class to the app. Drink.java is a pure Java class file that 
activities will get their drink data from. The class defines an array of three drinks, where 
each drink is composed of a name, description, and image resource ID. Switch to the 
Project view of Android Studio’s explorer, select the com.hfad. starbuzz package in the 
app/src/main/java folder, then go to File—>New...—Java Glass. When prompted, name 
the class “Drink”, and make sure the package name is com.hfad.starbuzz. Then 
replace the code in Drink.java with the following, and save your changes. 


package com.hfad.starbuzz; 

public class Drink { 

private String name; 
private String description 
private int imageResourceId; 


Each Drink has a name, description, and image 
resource ID. The image resource ID reters to drink 
v^ages we II add to the project on the next page. 


These arc 


drinks is an array o( three prinks. 

//drinks is an array of Drinks ^ 
public static final Drink[] drinks = { 

new Drink("Latte", "A couple of espresso shots with steamed milk", 

* ^-^R. drawable. latte) , 

Images o+ the new Drink ( "Cappuccino" , "Espresso, hot milk, and a steamed milk foam", 
drinks. I/Ve II -^ R.drawable.cappuccino) , 

add these next, new Drink("Filter", "Highest quality beans roasted and brewed fresh", 

R.drawable.filter) 

} ; 


The Prink 

donstrudtor 


//Each Drink has a name, description, and an image 
private Drink(String name. String description, int 
this.name = name; 
this.description = description; 
this.imageResourceId = imageResourceld; 

} 

public String getDescription() { 

return description; 

} 


resource 

imageResourceld) { 


public String getName() { 
return name; 

} 



These are getters -for 
the private variables. 


public int getlmageResourceld() { 

return imageResourceld; 

} 


□ 

Starbuzz 

MT3 

app/sre/main 

MB 

java 

MB 

com. hfad. starbuzz 

U 


Drink.java 
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} 


public String toString() 
return this.name; 

} 




The String representation 
ot a Prink is its name- 
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The image files 

The Drink code includes three image resources for its drinks with 
IDs of R.drawable.latte, R.drawable.cappuccino, and 
R. drawable .filter. These are so we can show the user images 
of the drinks. R. drawable . latte refers to an image file called latte , 

R. drawable . cappuccino refers to an image file called cappuccino , and 
R. drawable .filter refers to a file called filter. 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


We need to add these image files to the project, along with an image of the 
Starbuzz logo so that we can use it in our top-level activity. First, create 
the app/src/main/res/drawable folder in your Starbuzz project (if it doesn’t 
already exist). To do this, make sure you’ve switched to the Project view of 
Android Studio’s explorer, select the app/src/main/res folder, go to the File 
menu, choose the New... option, then click on the option to create a new 
Android resource directory. When prompted, choose a resource type of 
“drawable”, name the folder “drawable”, and click on OK. 

Once your project includes the drawable folder, download the files starbuzz- 
logo.png , cappuccino.png, filter png ^ and latte.png from https://git.io/v9oet. Finally, 
add each file to the app/src/main/res/draw able folder. 

When you add images to your apps, you need to decide whether to display 
different images for different density screens. In our case, we’re going to 
use the same resolution image irrespective of screen density, so we’ve put a 
single copy of the images in one folder. If you decide to cater to different 
screen densities in your own apps, put images for the different screen 
densities in the appropriate drawable* folders as described in Chapter 5. 

Here are the -four ima^e -files. You 
need to Create the drawable -folder, 
then add the '"^e tiles to it- 

When you save images to your project, Android assigns each of them 
an ID in the form R. drawable . image_name (where image_ 
name is the name of the image). As an example, the file latte.png is 
given an ID of R. drawable .latte, which matches the value of 
the latte’s image resource ID in the Drink class. 


O 


name: "Latte" 

description: "A couple of expresso 
shots with steamed milk" 


Android Studio wav have already 
added this -folder for you- If so, 
you don't need to recreate it- 



Drink 


imageResourceld: R.drawable.latte 

The ir*a$e latte.png 
is <yven an IP of 

Now that we’ve added the Drink class and image R.drawable-latte- 

resources to the project, let’s work on the activities. We’ll 
start with the top-level activity. 



R.drawable.latte 
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TopLevelActivity 


The top-level layout contains 
an image and a list 

When we created our project, we called our default activity 
TopLevelActivity.java, and its layout activity_top_level.xml. We need to 
change the layout so it displays an image and a list. 



Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


This is -the S-fcav-buzz. logo. 

We added this image to -the - 
project on -the previous page- 


We II add -these items as 
a statid list of options; 
then well make eadh list 
item dlidkable- 



You saw how to display images in Chapter 5 using an image view. In 
this case, we need an image view that displays the Starbuzz logo, so 
we’ll create one that uses starbuzz^logo.png as its source. 

Here’s the code to define the image view in the layout: 


Were going to/ <ImageView 

i L . \ • hese arc the dimensions we 

add this to \ android: layout_width="200dp” ^ j||iay ^ havc 

android:layout_height="100dp" ) souV . dc ^ -the image is the starbuzz^ 

android: src= M @drawable/starbuzz_logo M logopng -Pile we added to the app. 

android: con ten tDe scrip tion="@ string/s tarbuzz_logo M />^r^ Adding a dontent 

description makes your 


adtivity__top_ 
levelocml. Well 
show you the 
-Pull dode soon. 


When you use an image view in your app, you use the 
android: contentDescription attribute to add a description 
of the image; this makes your app more accessible. In our case, we’re 
using a String value of "Qstring/starbuzz_logo", so add this 
to strings, xml: 

<resources> 


app more accessible- 


□ 

Starbuzz 


Km 

app/sre/main 

LQ 


<string name="starbuzz_logo">Starbuzz logo</string> 

</resources> 

That’s everything we need to add the image to the layout, so let’s 
move on to the list. 



values 



strings.xml 
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Use a list view to display the list of options 


As we said earlier, a list view allows you to display a vertical list of data 
that people can use to navigate through the app. We’re going to add a 
list view to the layout that displays the list of options, and later on we’ll 
use it to navigate to a different activity. 

How to define a list view in XML 


You add a list view to your layout using the <ListView> element. 

You then add an array of entries to the list view by using the 
android: entries attribute and setting it to an array of Strings. The 
array of Strings then gets displayed in the list view as a list of text views. 

Here’s how you add a list view to your layout that gets its values from an 
array of Strings named options: 


lVeVe going 
to add this 
to aetivity__ 
*bofJevd.*wJ 
on the ne*t 
page. 


<ListView —— -This defines "the list view- 

\ android:id= M @+id/list_options M 

android:layout_width="match_j?arent" 
android:layout_height="wrap_content" 
android:entries= M @array/options M /> 


The values in 
"the lis-t view 
are de-Pined 
by -the 

options array. 



You define the array in exactly the same way that you did earlier in the 
book, by adding it to strings.xml like this: 

□ 

Starbuzz 


<resources> 


<string-array name="options"> 
<item>Drinks</item> 

<item>Food</item> 
<item>Stores</item> 
</string-array> 

</resources> 


HU 

app/sre/main 

43 



values 



strings.xml 


This populates the list view with three values: Drinks, Food, and Stores. 

@array/options The entries attribute 

populates the list view with 
values -Prom the options array. 
£aeh item in the list view is a 
te*t view- 

ListView Food strings.xml 

Stores 
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layout code 


The full top-level layout code 

Here’s the full layout code for our activity_top_level.xml, make 
sure you update your code to match ours: 



Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 

android: layout_width="match_j?arent" ^ ^ ^ ^ ^ a vev - tlta | 

android: layout_height="matchjparent" ovievrtaW This will display ouv list view 

android:orientation="vertical" Ac-div-efrlly underneath the Starbuzz. lo^o 

tools:context="com.hfad.starbuzz.TopLevelActivity" > 


<ImageView 

android:layout_width="20Odp" 

android:layout_height="10Odp" 

android:src="@drawable/starbuzz_logo" 

android:contentDescription="@ string/starbuz z_logo" 

<ListView 

android:id="@+id/list_options" 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content" 
android:entries="@array/options" /> 
</LinearLayout> 


□ 

Starbuzz 


/> 


Hu 

app/src/main 


res 


H3 

layout 


activity_ 

topjevel.xml 


Test drive- 

Make sure you’ve applied all the changes to activity_top_level.xml, 
and also updated strings.xml. When you run the app, you should 
see the Starbuzz logo displayed on the device screen with the 
list view underneath it. The list view displays the three values 
from the options array. 

If you click on any of the options in the list, nothing happens, 
as we haven’t told the list view to respond to clicks yet. The 
next thing we’ll do is see how you get list views to respond to 
clicks and launch a second activity. 


i 

D 2:27 1 " 

(3 Starbuzz 

1 


WQoffte 



Drinks 



These are -the values 
in the options array. 
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fret list views to respond to clicks with a listener 


You make the items in a list view respond to clicks by 
implementing an event listener. 

An event listener allows you to listen for events that take 
place in your app, such as when views get clicked, when 
they receive or lose the focus, or when the user presses a 
hardware key on their device. By implementing an event 
listener, you can tell when your user performs a particular 
action—such as clicking on an item in a list view—and 
respond to it. 

OnltemClickListener listens for item clicks 


The List\/iew heeds to know -the 



The ListView -tells the Mtivity xhe* a* item 
jets clicked so the Activity can v-eact- 


When you want to get items in a list view to respond to clicks, you 
need to create an OnltemClickListener and implement 
its onltemClick () method. The OnltemClickListener 
listens for when items are clicked, and the onltemClick () 
method lets you say how your activity should respond to the click. 
The onltemClick () method includes several parameters that 
you can use to find out which item was clicked, such as a reference 
to the view item that was clicked, the item’s position in the list view 
(starting at 0), and the row ID of the underlying data. 


We want to start DrinkCategoryActivity when the first 
item in the list view is clicked—the item at position 0. If the 
item at position 0 is clicked, we need to create an intent to start 
DrinkCategoryActivity. Here’s the code to create the 
listener; we’ll add it to TopLevelActivity.java on the next page: 


OnltemClidkListener is a 
nested dlass within “the 
Adap-ter\/iew dlass. A List\/iew 
is a subdass o-f Adaptcr\/iew. 


AdapterView.OnltemClickListener itemClickListener = new AdapterView.OnltemClickListener(){ 
public void onltemClick (AdapterView<?> listView, ’ The view 'that was dlidked (in this dase, 

View itemViewTX * IS ^ Vie ' w ^' 

int position, tVkese pavame-fceirs jive you into about 
long id) { \ whidh item was dlidked in “the lis-t view, 


Drinks is the -first item in the 
list view, so it's at position O. 

if (position == 0) 


{ 


su£h as the item's view and its position. 


Intent intent = new Intent(TopLevelActivity.this, DrinkCategoryActivity.class) 
startActivity(intent) ; 

The intent is doming -from It needs to laundh 

TopLe ve I Activity* Dr i nkCate goryAdti vi ty • 


}; 


Once you’ve created the listener, you need to add it to the list view. 
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setOnltemClickListenerQ 


Set the listener to the list view 

Once you’ve created the OnClickltemListener, you need 
to attach it to the list view. You do this using the ListView 
setOnltemClickListener () method, which takes one argument, 
the listener itself: 



Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


AdapterView.OnltemClickListener itemClickListener = new AdapterView.OnltemClickListener(){ 
public void onitemClick(AdapterView<?> listView, 


} Well add this -to TopLevelAAivity- The -full Code is listed 

_ on the ne*t double ot pages so you tan see it in tonte*t- 

ListView listView = (ListView) findViewByld(R.id.list_options); 


listView.setOnltemClickListener(itemClickListener) 

Adding the listener to the list view is crucial, as it’s this step that notifies 
the listener when the user clicks on items in the list view. If you don’t do 
this, the items in your list view won’t be able to respond to clicks. 


K 


This is the listener we just treated- 


You’ve now seen everything you need in order to get the 
TopLevelActivity list view to respond to clicks. 


The full TopLevelActivityjava code 

Here’s the complete code for TopLevelActivityjava. Replace the 
code the wizard created for you with the code below and on the 
next page, then save your changes: 


package com.hfad.starbuzz; 


import 

import 

import 

import 

import 

import 


android.app.Activity; 
android.os.Bundle; 
android.content.Intent; 
android.widget.AdapterView; 
android.widget.ListView; 
android.view.View; 


— IiMeVe using 
so we need 


□ 

Starbuzz 


all -these dasses, 
to import them. 


app/sre/main 

MH 

java_ 

mil 


com. hfad .starbuzz 



public class TopLevelActivity extends Activity { 

T 

Make sure your activity 
extends the Activity dass. 


TopLevel 

Activity.java 
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ToplevelActivity.java (continued) 


-Hv 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_top_level); 
//Create an OnltemClickListener 

AdapterView.OnltemClickListener itemClickListener = 


list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


Octant the lis-tcrkCV" 


new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listView, 

View itemView, i , , 

Implement its 

int position, onliemCliekO 

iong id) { 

if (position == 0) { 

Intent intent = new Intent(TopLevelActivity.this, 

DrinkCategoryActivity.class) ; 


□ 

Starbuzz 

43 

app/sre/main 

HD 


startActivity(intent); 


java 


} 


43 


) ; 

//Add the listener to the list view 


Launch pv'mkCa-tegovvAdiiviiY i-C iKe 

. , ,. . i .i u/ mi com.hfad.starbuzz 

usev clicks on the Pv-mks item. I/ve II | 

dveaie -this adiiviiy next, so dox'L wovv-y |r~| 

i-f Android Studio says it doesn’t exist- TopLevel 


ListView listView = (ListView) findViewByld(R.id.list_options); 
listView. setOnltemClickListener (itemClickListener) ; the listener to th 

list view. 


Activity.java 


What the ToplevelActivity.java code does 

Q The onCreate() method in TopLevelActivity creates an 

OnltemClickListener and links it to the activity's ListView. 


O 

TopLevelActivity 



ListView 


OnltemClickListener 


When the user clicks on an item in the list view, the 
onltemClickListener's onItemClick() method gets called. 

If the Drinks item is clicked, the OnltemClickListener creates an intent to start 
DrinkCategoryActivity. 



We need to Create 
•this activity 


ListView 


onltemCI ickListener 


DrinkCategoryActivity 
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Where we've got to 

So far we’ve added DrinLjava to our app and created 
TopLevelActivity and its layout. 


-Hv 


Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 




The next thing we need to do is create 
DrinkCategoryActivity and its layout so that it 
gets launched when the user clicks on the Drinks option in 
TopLevelActivity. 


tJiereicire no 

Dumb Questions 


0; 


Why did we have to create an event listener to get items 
in the list view to respond to clicks? Couldn’t we have just 
used its android: onClick attribute in the layout code? 


You can only use the android: onClick attribute 
in activity layouts for buttons, or any views that are subclasses of 
Button such as CheckBoxes and RadioButtons. 


The ListView class isn’t a subclass of Button, so using 
the android: onClick attribute won’t work. That’s why you 
have to implement your own listener. 
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list views and adapters 



Here’s some activity code from a separate project. When the user clicks on an item in a list 
view, the code is meant to display the text of that item in a text view (the text view has an ID of 
text_view and the list view has an ID of list_view) . Does the code do what it’s meant 
to? If not, why not? 


package com.hfad.ch 06 ex; 


import android.app.Activity; 
import android.os.Bundle; 
import android.widget.AdapterView; 
import android.widget.ListView; 
import android.widget.TextView; 
import android.view.View; 

public class MainActivity extends Activity { 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

final TextView textView = (TextView) findViewByld(R.id.text_view); 
AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listView, 

View v, 

int position, 

long id) { 

TextView item = (TextView) v; 
textView.setText(item.getText()); 


}; 

ListView listView 


(ListView) findViewByld(R.id.list_view); 
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exercise solution 



E-^wdSe 

DOLytlOH 


Here’s some activity code from a separate project. When the user clicks on an item in a list 
view, the code is meant to display the text of that item in a text view (the text view has an ID of 
text_view and the list view has an ID of list_view) . Does the code do what it’s meant 
to? If not, why not? 


package com.hfad.ch 06 ex; 

import android.app.Activity; 
import android.os.Bundle; 
import android.widget.AdapterView; 
import android.widget.ListView; 
import android.widget.TextView; 
import android.view.View; 

public class MainActivity extends Activity { 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

final TextView textView = (TextView) findViewByld(R.id.text_view) 
AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listView, 

View v, 

int position. 

This is the item w the long id) { 

ListView that was tlitked. - "^TextView item = (TextView) v; 

\Vc a Te'jcfcVicw, so we dan ^ 

^ i textView. setText (item. getTextO); 


its te%t usmg jetTe*tO. 


} ; 

ListView listView = (ListView) findViewByld(R.id.list_view); 

The Code doesn't v/ov-k as intended because the line o-f dode 
list\/iey/.set()n|temClidkListenev(itenr\ClidkListenev-); 
is hissing -(rom the end P the dode. Af3v-t -Pv-om that; the Lodes -Pine* 
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A category activity displays the data 
for a single category 

As we said earlier, DrinkCategoryActivity is an example of 
a category activity. A category activity is one that shows the data 
that belongs to a particular category, often in a list. You use the 
category activity to navigate to details of the data. 

We’re going to use DrinkCategoryActivity to display a list 
of drinks. When the user clicks on one of the drinks, we’ll show 
them the details of that drink. 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


i 

Q 2:27 1 

Q Starbuzz 




Men -the user dlidks on 
the Prinks item, activity 
PrinkCatd^oryA^tivity 
is started- 


i 'a Q 2:28 1 


fl 

Q 2:29 

Q Starbuzz 


Q Starbuzz 

Latte 




Cappuccino 

A 

W'.IT 



PrinkCatejoryAdtivity 

displays a lis-t o( drinks. 
Men ike user clicks on a 
drink, that drink is then 
displayed in PrinkAdtivity. 



Create DrinkCategoryActivity 

To work on the next step in our checklist, we’ll create an activity 
with a single list view that displays a list of all the drinks. Select 
the com.hfad.starbuzz package in the app/src/main/java folder, then 
go to File^New...^Activity—>Empty Activity. Name the activity 
“DrinkCategoryActivity”, name the layout “activity_drink_category”, make 
sure the package name is com. hf ad. starbuz z and uncheck the 
Backwards Compatibility (AppCompat) checkbox. 

We’ll update the layout code on the next page. 


Some versions ot Android 
Studio may ask you what 
the sourde lanjuaje ot 
your adtivity should be- |-f 
prompted, seledt the option 
-for Java. 
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layout code 


Update activity_d rink_catcg o ry.xtvil 

Here’s the code for activity_drink_category.xml. As you can see, it’s a 
simple linear layout with a list view. Update your version of activity_ 
drink_category.xml to reflect ours below: 



Add resources 

TopLevelActivity 

DrinkCategoryActivity 

DrinkActivity 


o 

Starbuzz 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_jparent" 
android:orientation="vertical" 

tools:context="com.hfad.starbuzz.DrinkCategoryActivity"> 

TW»s layout only needs 

<ListView Contain a LisWiew- 

android:id="@+id/list_drinks" 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content" /> 

</LinearLayout> 


H3 

app/sre/main 

43 


_ 

m3 

layout 


activity_ 

drink_category.xml 


There’s one key difference between the list view we’re creating 
here, and the one we created in activity_top_activity.xml\ there’s no 
android: entries attribute here. But why? 

In activity_top_activity.xml, we used the android: entries 
attribute to bind data to the list view. This worked because the data 
was held as a static String array resource. The array was described 
in strings.xml, so we could easily refer to it using: 

android:entries="@array/options" 

where options is the name of the String array. 

Using android: entries works fine if the data is a static array 
in strings, xml. But what if it isn’t? What if the data is held in an 
array you’ve programmatically created in Java code, or held in a 
database? In that case, the android: entries attribute won’t 
work. 

If you need to bind your list view to data held in something other 
than a String array resource, you need to take a different approach; 
you need to write activity code to bind the data. In our case, we 
need to bind our list view to the drinks array in the Drink class. 
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For nonstatic data, use an adapter 

If you need to display data in a list view that comes from a source 
other than strings.xml (such as a Java array or database), you need 
to use an adapter. An adapter acts as a bridge between the data 
source and the list view: 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


We’ll use an array 
-for our data 
source, but we 
dould have used 
a database or 
a web service 
instead- 



Adapter 



t 


Tbe adapter bridges tbe $ap between tbe list 
view and -the data source Adapters allow list 
views to display data -from a variety ot sources. 


There are several different types of adapter. For now, we’re 
going to focus on array adapters. 

An array adapter is a type of adapter that’s used to bind 
arrays to views. You can use it with any subclass of the 
AdapterView class, which means you can use it with both list 
views and spinners. 

In our case, we’re going to use an array adapter to display data 
from the Drink. drinks array in the list view. 


ListView 

» 


An adapter acts as a 
bridge between a view 
and a data source. An 
Array Adapter is a 
type ol adapter that 
specializes in working 
with arrays. 


This is ouv* away- 

4 - 


Well erea-te an away adapter -to 
bind ouv- list view -to ouv- away. 

ir 


This is ouv- lis-t view - 


Drink. 

drinks 

Y 


Array 

^Adapter - 

V 

ListView 


X 


-7 



We’ll see how this works on the next page. 
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array adapter 


Connect list views to arrays 
with an array adapter 

You use an array adapter by initializing it and then attaching it to 
the list view. 

To initialize the array adapter, you first specify what type of data is 
contained in the array you want to bind to the list view. You then 
pass the array adapter three parameters: a Context (usually the 
current activity), a layout resource that specifies how to display 
each item in the array, and the array itself. 

Here’s the code to create an array adapter that displays drink 
data from the Drink, drinks array (you’ll add this code to 
DrinkCategoryActivity.java on the next page): 

ArrayAdapter<Drink> listAdapter = new ArrayAdapterO 

"-this" reters the Current^ this ' This is 3 layout 

activity- The Activity class android.R. layout. simple_list_item_l, ^ — resource- It tells the array 

is a subclass o-f Content- Drink, dr inks) ; The array adapter to display each item in 

the array in a single ■tex't View. 

You then attach the array adapter to the list view using the 
ListView setAdapter () method: 

ListView listDrinks = (ListView) findViewByld(R.id.list_drinks); 
listDrinks.setAdapter(listAdapter); 

Behind the scenes, the array adapter takes each item in the array, 
converts ittoaString using its toString () method, and puts 
each result into a text view. It then displays each text view as a 
single row in the list view. 


y/ Add resources 
V TopLevelActivity 

DrinkCategoryActivity 

DrinkActivity 


These are -the drinks -from 
■the drinks array. Bath 
row in -the lis-t view is a 
single -te*i view, tat h one 
displaying a separa-te drink. 
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Add the array adapter to 
PrinkCategoryActivity 

We’ll change the DrinkCategoryActivity.java code so that the list 
view uses an array adapter to get drinks data from the Drink 
class. Weil put the code in the onCreate () method so that 
the list view gets populated when the activity gets created. 

Here’s the full code for the activity (update your copy of 
DrinkCategoryActivity.java to reflect ours, then save your changes): 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


package com.hfad.s tarbu z z; 

import android.app.Activity; 
import android.os.Bundle; 
import android.widget.ArrayAdapter; 
import android.widget.ListView; 


WeVe us'mcj these diasses so 
we need to import them. 


Make sure y our activity 
extends the Activity dlass. 

public class DrinkCategoryActivity extends Activity { 


□ 

Starbuzz 

app/src/main 

K3 


java 


MTJ 


com.hfad.starbuzz 

LJ 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink_category); 
ArrayAdapter<Drink> listAdapter = new ArrayAdapterO( 

This populates \ this, 

the list view ) android. R. layout. simple_list_item_l, 

with data tr om y 

\ Drink.drinks); 

ListView listDrinks = (ListView) findViewByld(R.id.list_drinks); 
listDrinks.setAdapter(listAdapter); 


DrinkCategory 

Activity.java 


the dv-inks avvay- 


} 


} 


These are all the changes needed to get your list view to display 
a list of the drinks from the Drink class. Let’s go through what 
happens when the code runs. 
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what happens 


What happens when you run the code 


Q When the user clicks on the Drinks option, DrinkCategoryActivity is launched. 

Its layout has a LinearLayout that contains a ListView. 


o- 





DrinkCategoryActivity 


LinearLayout 


o 

ListView 


Q DrinkCategoryActivity creates an ArrayAdapter<Drink>, an array adapter 
that deals with arrays of Drink objects. 


O 



DrinkCategoryActivity 


ArrayAdapter<Drink> 


The array adapter retrieves data from the drinks array in the Drink class. 

It uses the Drink. toString () method to return the name of each drink. 


o 


Drink.toStringQ 



DrinkCategoryActivity 


ArrayAdapter<Drink> 


Drink.drinks 


o 


DrinkCategoryActivity makes the ListView use the array adapter via the 
setAdapterO method. 

The list view uses the array adapter to display a list of the drink names. 
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Test drive the app 

When you run the app, TopLevelActivity gets 
displayed as before. When you click on the Drinks item, 
DrinkCategoryActivity is launched. It displays 
the names of all the drinks from the Drink Java class. 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


i 

Q 2:27 

Q Starbuzz 



Click on the prinks item 
to see a list o( drinks. 


_ ZZ 

arco/fte 


i 

Q 2:28 y 

Q Starbuzz 



Drinks 

Food 

Stores 


Latte 

Cappuccino 

Filter 


On the next page we’ll review what we’ve done in the 
app so far, and what’s left for us to do. 
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you are here 


App review: where we are 

So far we’ve added DrinLjava to our app, and 
created activities TopLevelActivity and 
DrinkCategoryActivity along with their layouts. 


v 


Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


Device 


l/Ve've dveaied Pv'mkjava- 


<Layout> I 
</Layou-fc> j 


<L-ayout> I 
</Layou-t> 


ac+ivi+y_+op_level.xml activity_drink_category.xml 


o 

Drink.java 


<Layou-t> I 
</Layou-t> 


activity_drink.xml 



TopLevelActivity.java DrinkCategoryActivity.java 

1 Ntvt dvea-led -these 


Here’s what our app currently does: 


activities and -theiv- layouts- 


DrinkActivity.java 

r 

Wc haven^t Seated 
tVmkActivity yet- 


o 


When the app gets launched, it starts activity 
TopLevel Activity. 

The activity displays a list of options for Drinks, Food, and 
Stores. 


O 

o 


The user clicks on Drinks in TopLevelActivity. 

This launches activity DrinkCategoryActivity, 
which displays a list of drinks. 

DrinkCategoryActivity gets the values for its 
list of drinks from the brink.java class file. 


The next thing we’ll do is get 
DrinkCategoryActivity to launch 
DrinkActivity, passing it details of whichever drink 
was clicked. 
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list views and adapters 



Pool Puzzje 


Your goal is to create an activity that binds n , , 

a Java array of colors to a spinner. Take ^eJoer, " e Tc 

spirmevs m Cnaptev- v. 


code snippets from the pool and place 
them into the blank lines in the activity. 
You may not use the same snippet 
more than once, and you won't need to 
use all the snippets. 


public class MainActivity extends Activity { 


WisVe not wsir.5 this 
activity in our 


String[] colors = new String[] {"Red", "Orange", "Yellow", "Green", "Blue"}; 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Spinner spinner = ( ) findViewByld(R.id.spinner); 

ArrayAdapter< > adapter = new ArrayAdapterO( 


} 


android.R.layout.simple_spinner_item. 


colors); 

spinner. 


(adapter) ; 


Tliis displays tai\\ value m the avv-ay 
as a single vov/ in *lhe spinney. 


Note: each snippet 

















handling clicks 


How we handled clicks in TopLevelActivity 

Earlier in this chapter, we needed to get 
TopLevelActivity to react to the user clicking on the 
first item in the list view, the Drinks option, by starting 
DrinkCategoryActivity. To do that, we had to 
create an OnltemClickListener, implement its 
onltemClick () method, and assign it to the list view. 

Here’s a reminder of the code: 



Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


AdapterView. OnltemClickListener itemClickListener = ^ Crcdfcc *fcta listener* 

new AdapterView.OnltemClickListener(){ 

public void onltemClick (AdapterView<?> listView, ^-' The list view 

View itemView,"^ 

int position, C The item view that was dlidked, its position in 
long id) { J the list, and the tow [D o-f the underlying data. 

if (position == 0) { 

Intent intent = new Intent(TopLevelActivity.this, 

DrinkCategoryActivity.class); 

startActivity(intent); 

} 


} ; 

ListView listView = (ListView) findViewByld(R.id.list_options); 

listView. setOnltemClickListener (itemClickListener) ; ^ lis-iener -fco -the lis-t view 


We had to set up an event listener in this way because list 
views aren’t hardwired to respond to clicks in the way that 
buttons are. 

So how should we get DrinkCategoryActivity to 
handle user clicks? 
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Pass the IP of the item that was clicked 
by adding it to an intent 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


When you use a category activity to display items in a list 
view, you’ll usually use the onltemClick () method to 
start another activity that displays details of the item the 
user clicked. To do this, you create an intent that starts the 
second activity. You then add the ID of the item that was 
clicked as extra information so that the second activity can 
use it when the activity starts. 

In our case, we want to start DrinkActivity and pass it 
the ID of the drink that was selected. DrinkActivity will 
then be able to use this information to display details of the 
right drink. Here’s the code for the intent: 


Intent 



DrinkCategoryActivity DrinkActivity 


Pv-'mkCa-tejov-yAdiiviiy needs bo start Dv-mkActivity. 

'f 1 / 

DrinkActivity.class); 

Add -the IP -the rle** that 

was clicked bo in-ten-t. 

-tke drink 


Intent intent = new Intent(DrinkCategoryActivity.this, 
intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int) id) 
startActivity(intent); 


T. 


Wt re usincj a ^o^S”tajr>”t -Por "the name O'P ‘the 
e*bra in-Pormaiion in -the inien-t so -that we know 
DrinkCaiejoryAc-tivi-ty and DrinkAciiviiy are 
us'mg -the same S-tring. l/Vell add this eons-tant to 
DrinkActivity when we Create the activity. 


This is the index. o( 
in the drinks array. 


It’s common practice to pass the ID of the item that was 
clicked because it’s the ID of the underlying data. If the 
underlying data is an array, the ID is the index of the item in 
the array. If the underlying data comes from a database, the 
ID is the ID of the record in the table. Passing the ID of the 
item in this way means that it’s easier for the second activity 
to get details of the data, and then display it. 

That’s everything we need to make 

DrinkCategoryActivity start DrinkActivity and 
tell it which drink was selected. The full activity code is on 
the next page. 
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DrinkCategoryActivity code 


The full PrinkCategoryActivity code 

Here’s the full code for DrinkCategoryActivity.java (add the new 
method to your code, then save your changes): 


V 

v 

-Hv 


Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


package com.hfad.starbuzz; 


□ 


import android.app.Activity; 
import android.os.Bundle; 
import android.widget.ArrayAdapter; 
import android.widget.ListView; 

import android.view.View; —VVeVe us'mj these e%tra classes 
import android, content. Intent; so we need to irofoirt them 

import android.widget.AdapterView; 

public class DrinkCategoryActivity extends Activity { 


Starbuzz 


4B 

app/sre/main 

MB 

java 


MB 

com.hfad.starbuzz 

L 0 

DrinkCategory 
Activity.java 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_drink_category); 

ArrayAdapter<Drink> listAdapter = new ArrayAdapterO( 
this , 

android.R.layout.simple_list_item_l , 

Drink.drinks); 

ListView listDrinks = (ListView) findViewByld(R.id.list_drinks); 
listDrinks.setAdapter(listAdapter); 

Create a listener -to listen (or elieks. 

//Create the listener 

AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listDrinks, 

This «ts tailed when an iW view itemView ' 

in -the list view is clicked- int P osition ' 

long id) { 

//Pass the drink the user clicks on to DrinkActivity 
l/Vhch the user elidks Intent intent = new Intent (DrinkCategoryActivity. this, 

^ SS DrinkActivity. class) ; 

to Pv-InkAc-tiVi-ty and ( intent.putExtra (DrinkActivity.EXTRA_DRINKID, (int) id); 

V startActivity (intent) ; ^ ^ » e *Rso 

^ don*t worry frndroid Stvdio 

says it doesn't e%ist- 

//Assign the listener to the list view 
listDrinks.setOnltemClickListener(itemClickListener); 



}; 


} 
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A detail activity displays data 
for a single record 



list views and adapters 

Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


As we said earlier, DrinkActivity is an example of a detail activity. A detail 
activity displays details for a particular record, and you generally navigate to it from 
a category activity. 

We’re going to use DrinkActivity to display details of the drink the user selects. 
The Drink class includes the drink’s name, description, and image resource ID, so 
we’ll display this data in our layout. We’ll include an image view for the drink image 
resource, and text views for the drink name and description. 

To create the activity, select the com.hfad.starbuzz package in the app/src/main/ 
java folder, then go to File^New...—> Activity—>Empty Activity. Name the activity 
“DrinkActivity”, name the layout “activity_drink”, make sure the package name 
is com. hfad. starbuzz, and uncheck the Backwards Compatibility^ 
(AppCompat) checkbox. Then replace the contents of activity_drink.xml with this: 


<?xml version="1.0" encoding="utf-8"?> 

CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.starbuzz.DrinkActivity" > 


Make sure you erea-te 
- -the new activity- 

|t p-on>pted to*- -the 
activity's sowvte lan^uaje, 
select the option to*- Java- 


□ 

Starbuzz 

HU 

app/sre/main 

HU 


<ImageView 


LU 


android:id="@+id/photo" 

android:layout width="190dp" 
android:layout_height="190dp" /> 


layout_ 

l__ 

]</*mll 

activity_drink.xml 

CTextView 

i 

^ Q 2:28 1 

android:id="@+id/name" \ 

0 Starbuzz 


android: layout_width="wrap_content" 
android: layout_height="wrap_content" /> 

CTextView 

android:id="@+id/description" 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content" /> 
</LinearLayout> 

Now that you’ve created the layout of your detail activity, we can 
populate its views. 
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get a drink 


Retrieve data from the intent 

As you’ve seen, when you want a category activity to start a detail 
activity, you have to make items in the category activity list view 
respond to clicks. When an item is clicked, you create an intent to 
start the detail activity. You pass the ID of the item the user clicked 
as extra information in the intent. 

When the detail activity is started, it can retrieve the extra 
information from the intent and use it to populate its views. In 
our case, we can use the information in the intent that started 
DrinkActivity to retrieve details of the drink the user clicked. 

When we created DrinkCategoryActivity, we added the ID 
of the drink the user clicked as extra information in the intent. We 
gave it the label DrinkActivity. EXTRA_DRINKID, which we 
need to define as a constant in DrinkActivity.java: 



Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


public static final String EXTRA_DRINKID = "drinkld"; 


As you saw in Chapter 3, you can retrieve the intent that started an 
activity using the get Intent () method. If this intent has extra 
information, you can use the intent’s get* () methods to retrieve 
it. Here’s the code to retrieve the value of EXTRA_DRINKID from 
the intent that started DrinkActivity: 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 

Once you’ve retrieved the information from the intent, you can use 
it to get the data you need to display in your detail record. 

In our case, we can use drinkld to get details of the drink the 
user selected, dr in kid is the ID of the drink, the index of the 
drink in the drinks array. This means that you can get details 
about the drink the user clicked on using: 

Drink drink = Drink.drinks[drinkld]; 


This gives us a Drink object containing all the information we 
need to update the views attributes in the activity: 



drink 


name="Latte" 

description="A couple of espresso shots with steamed milk" 
imageResource!d=R.drawable.latte 
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list views and adapters 


Update the views with the data 

When you update the views in your detail activity, you need to make sure 
that the values they display reflect the data you’ve derived from the intent. 

Our detail activity contains two text views and an image view. We need 
to make sure that each of these is updated to reflect the details of the 

Drink Magnets 

See if you can use the magnets below to populate the 
DrinkActivity views with the correct data. 


drink. 



k 


O name 

description 

imageResourceld 

drink 


//Get the drink from the intent 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 
Drink drink = Drink.drinks[drinkld]; 


//Populate the drink name 

TextView name = (TextView)findViewByld(R.id.name); 
name. (drink.getName()); 


/ / 13 atm i "1 r} "h rx -f- In ^ H t i m V 




setText | 

/ / Jr U£J U.-L cL Lkr Lllkr U.J__LilJv 

TextView description 

U.kr oLI _L L-L(Jll 

= (TextView)findViewByld(R.id.description) ; 





setContent | 

description. 

(drink.getDescription()) ; 

r 





1 

setContentDescription 1 

//Populate the drink image 

ImageView photo = (ImageView)findViewByld(R.id.photo) ; 




1 setlmageResource Id | 

photo. 

(drink.getlmageResourceld ()); 






| setlmageResource 1 

photo. 

(drink.getName ()); 








1 setText | 
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magnets solution 



8 


Drink Magnets Solution 


See if you can use the magnets below to populate the 
DrinkActivity views with the correct data. 


//Get the drink from the intent 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID) 
Drink drink = Drink.drinks[drinkld]; 

//Populate the drink name 

TextView name = (TextView)findViewByld(R.id.name); 



Use seiTexiO //Populate the drink description 



TextView description = (TextView)findViewByld(R.id.description); 


in a text view. 


description. I(drink. getDescription () ) ; 



//Populate the drink image 

ImageView photo = (ImageView)findViewByld(R.id.photo); 




or the image using 

set|mageResour£eO. 


photo. I se tImageResource k( drink.getlmageResourceld()); 


This is needed 


photo. I setContentDescription I (drink.getName()); 


to make the app 
more atdessible. 



V^ou didn't need to use these. 
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The PrinkActivity code 

Here’s the full code for DrinkActivity.java (replace the code the 
wizard gave you with the code below, then save your changes): 



list views and adapters 

Add resources 

TopLevelActivity 

DrinkCategoryActivity 

DrinkActivity 


package com.hfad.starbuzz; 

lVcVc usm<j -these 

import android.app.Activity;^ t | asses so we 
import android. os . Bundle; \ import therm 

import android.widget.ImageView; 
import android.widget.TextView; 


□ 

Starbuzz 


HU 

app/sre/main 

HU 

Make sure your activity java_ 

^ extends -the Activity elass. I— 

v"” mm hfaH 


public class DrinkActivity extends Activity { 

public static final String EXTRA DRINKID = "drinkld"; 

A- 

@Override Add £><TRA_PRIMP as a Constant 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink); 


com.hfad.starbuzz 

LQ 


DrinkActivity.java 


//Get the drink from the intent 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 
Drink drink = Drink, drinks [drinkld] ; <_ Mse ^ drir> k|d ^ ^ j 

the drink -the user ehose- 

//Populate the drink name 

TextView name = (TextView)findViewByld(R.id.name); 
name.setText(drink.getName()); 


Populate 
the views \ 
with the 
drink data- 


//Populate the drink description 

TextView description = (TextView)findViewByld(R.id.description); 
description.setText(drink.getDescription()); 



//Populate the drink image 

ImageView photo = (ImageView) findViewByld(R. id.photo) ; 
photo.setlmageResource(drink.getlmageResourceld()); 
photo.setContentDescription(drink.getName()); 


} 
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what happens 


What happens when you run the app 



Add resources 
TopLevelActivity 
DrinkCategoryActivity 
DrinkActivity 


© 


When the user starts the app, it launches TopLevelActivity. 



0 


The onCreate() method in TopLevelActivity creates an 
onltemClickListener and links it to the activity's ListView. 


Q 0^“~"0 

TopLevelActivity ListView onltemClickListener 


When the user clicks on an item in the ListView, the 
onltemClickListener's onItemClick() method gets called. 

If the Drinks item was clicked, the onltemClickListener creates an intent to start 
DrinkCategoryActivity. 



ListView onltemClickListener 


DrinkCategoryActivity 


o 


DrinkCategoryActivity displays a single ListView. 

The DrinkCategoryActivity list view uses an ArrayAdapter<Drink> to 
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list views and adapters 


The story continues 


© 


When the user chooses a drink from DrinkCategoryActivity' s ListView, 
onltemClickListener’s onltemClickQ method gets called. 


onltemClickQ 



DrinkCategoryActivity ListView onltemClickListener 


© 


The onItemClick() method creates an intent to start DrinkActivity, passing 
along the drink ID as extra information. 

Intent 



DrinkCategoryActivity 


DrinkActivity 


© 


DrinkActivity launches. 

It retrieves the drink ID from the intent, and gets details for the correct drink from the Drink 
class. It uses this information to update its views. 


drinks [0] 



DrinkActivity Drink 


drinks[0]? That's 
a latte, a fine choice. 
Here's everything I 
know about lattes. 
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test drive 
k — 


Test drive the app 


When you run the app, TopLevelActivity gets 
displayed. 


Wtvt "the Drinks pdr*t 

o( -bKc app- The other items worn !t 

do anything i-P you elidk on them. 

When you click on the Drinks item, 
DrinkCategoryActivity is launched. It 
displays all the drinks from the Drink java class. 


When you click on one of the drinks, 
DrinkActivity is launched and details of the 
selected drink are displayed. 


Using these three activities, you can see how to structure 
your app into top-level activities, category activities, and 
detail/edit activities. In Chapter 15, we’ll revisit the 
Starbuzz app to explain how you can retrieve the drinks 
from a database. 


i 

Q 2:27 1 

Q Starbuzz 

Starfewzz 

wcofht 


Drinks ^ ™ 


Food \ 


Stores 1 

t 



i 

Q 2:28 1 

Q Starbuzz 




i Q 2:28 
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list views and adapters 



Pda] plizzje ^ajuflan 

Your goal is to create an activity that binds 
a Java array of colors to a spinner. Take 
code snippets from the pool and place 
them into the blank lines in the activity. 
You may not use the same snippet 
more than once, and you won't need to 
use all the snippets. 


public class MainActivity extends Activity { 

String[] colors = new String[] {"Red", "Orange", "Yellow", "Green", "Blue"}; 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Spinner spinner = ( Spinner ) findViewByld(R.id.spinner); 
^^*ArrayAdapter< String > adapter = new ArrayAdapterO ( 

usrng ah array this , 

android.R.layout.simple_spinner_item, 
colors); 

spinner. setAdapter (adapter); 


WeVe 
of type string. 


} 


} 


>T 

Use setAdapterO to get “the 
spihher to use the array adapter. 
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Your Android Toolbox 


You’ve got Chapter 7 under 
your belt and now you’ve 
added list views and app design 
to your toolbox. 


Yow tan download 
-tVnc -full Code -for 
■the thaptev W 
Wb^/Ainyuv-ltom/ 

HeadFiv-stAmdroid- 



BULLET POINTS 


■ Sort your ideas for activities into 
top-level activities, category activities, 
and detail/edit activities. Use the 
category activities to navigate from 
the top-level activities to the detail/ 
edit activities. 

■ A list view displays items in a list. 

Add it to your layout using the 

<Listview> element. 

■ Use android: entries in your 
layout to populate the items in your 
list views from an array defined in 
strings, xml. 


An adapter acts as a bridge 
between an AdapterView 
and a data source. Listviews 
and Spinners are both types of 

AdapterView. 

An ArrayAdapter is an adapter 
that works with arrays. 

Handle click events on Buttons 
using android: onClick in 

the layout code. Handle click events 
elsewhere by creating a listener and 
implementing its click event. 
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8 support libraries and app burs 



^ Taking Shortcuts ♦ 



We'd have got 
here hours ago if she'd 
known about the Up 
button. Harrumph! 


See, Whiskey, 

I said we'd get 
home eventually. 


Everybody likes a shortcut. 

And in this chapter you’ll see how to add shortcuts to your apps using app bars. We’ll 
show you how to start activities by adding actions to your app bar, how to share content 
with other apps using the share action provider, and how to navigate up your app’s 
hierarchy by implementing the app bar’s Up button. Along the way we'll introduce you to 
the powerful Android Support Libraries, which are key to making your apps look fresh 
on older versions of Android. 
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app structure 


Great apps have a clear structure 

In the previous chapter, we looked at ways of structuring an app 
to create the best user experience. Remember that one way of 
creating an app is to organize the screens into three types: 



They also have great shortcuts 

if a user’s going to use your app a lot, they’ll want quick ways to 
get around. We’re going to look at navigational views that will give 
your user shortcuts around your app, providing more space in your 
app for actual content. Let’s begin by taking a closer look at the 
top-level screen in the above Pizza app. 
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support libraries and app bars 


(Afferent types of navigation 

In the top-level screen of the Pizza app, there’s a list of options 
for places in the app the user can go to. 



The top three options link to category activities; the first presents 
the user with a list of pizzas, the second a list of pasta, and the 
third a list of stores. They allow the user to navigate around the ^ 
app. 

The fourth option links to a detail/edit activity that allows the 
user to create an order. This option enables the user to perform 

an action. 


These a\re like ■the navija-tion 
options we looked at in Chapter 7- 


In Android apps, you can add actions to the app bar. The app 
bar is the bar you often see at the top of activities; it’s sometimes 
known as the action bar. You generally put your app’s most 
important actions in the app bar so that they’re prominent at the 
top of the screen. 

In the Pizza app, we can make it easy for the user to place an 
order wherever they are in the app by making sure there’s an 
app bar at the top of every activity that includes a Create Order 
button. This way the user will have access to it wherever they are. 

Let’s look at how you create app bars. 


This is an aff bar. 

I 



you are here ► 


291 








steps 


Here's what we're going to do 


There are a few things we’re going to cover in this chapter. 


© 


Add a basic app bar. 

We’ll create an activity called MainActivity 
and add a basic app bar to it by applying a theme. 


This is -the app bar we'll add 



© 


Replace the basic app bar with a toolbar. 

To use the latest app bar features, you need to replace the basic app bar with 
a toolbar. This looks the same as the basic app bar, but you can use it to do 
more things. 


© 


Add a Create Order action. 

We’ll create a new activity called Order Activity, and add an action to 
MainActivity’s app bar that opens it. 



MainActivity app bar 


o 


Implement the Up button. 

We’ll implement the Up button on OrderActivity’s app bar so that 
users have an easy way of navigating back to MainActivity. 



MainActivity 



The Up button -features a 
button that (eon-fusin^ly) 
points to tbe le-ft 


OrderActivity app bar 


© 


Add a share action provider. 

We’ll add a share action provider to MainActivity’s app bar so that users 
can share text with other apps and invite their friends to join them for pizza. 


^—Youll -find out what 
action providers are 
later in tbe chapter. 



MainActivity app bar 


Intent 



ACTION_SEND 
type: "text/plain" 
messageText: "Hi! 


AppActivity 


Let’s start by looking at how you add a basic app bar. 
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Add an app bar by applying a theme 

An app bar has a number of uses: 

Displaying the app or activity name so that the user knows where in the 
app they are. As an example, an email app might use the app bar to 
indicate whether the user is in their inbox or junk folder. 

Making key actions prominent in a way that’s predictable—for example, 
sharing content or performing searches. 

H Navigating to other activities to perform an action. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


To add a basic app bar, you need to use a theme that includes an app 
bar. A theme is a style that’s applied to an activity or application so that 
your app has a consistent look and feel. It controls such things as the 
color of the activity background and app bar, and the style of the text. 

Android comes with a number of built-in themes that you can use in 
your apps. Some of these, such as the Holo themes, were introduced in 
early releases of Android, and others, such as the Material themes, were 
introduced much later to give apps a more modern appearance. 


Bits and Pizzas 


Bits and Pizzas 


The Holo 
themes have ^ 
been ih 
Android sihde 
API level II . 


But there’s a problem. You want your apps to look as modern and 
up-to-date as possible, but you can only use themes from the version of 
Android they were released in. As an example, you can’t use the native 
Material themes on devices that are running a version of Android older 
than Lollipop, as the Material themes were introduced with API level 21. 


v 



The Material 

themes were 
introduced in 

API level 2J. 


These themes look a bit di-P-Perent 
-Prom the one on the previous page, 
as they haven ; t had any e*tra 
styling applied to them. You'll -pind 
out how to add styling later in the 
chapter. 


The problem isn’t just limited to themes. Every new release of Android 
introduces new features that people want to see in their apps, such as 
new GUI components. But not everyone upgrades to the latest version 
of Android as soon as it comes out. In fact, most people are at least one 
version of Android behind. 


So how can you use the latest Android features and themes in your 
apps if most people aren’t using the latest version? How can you give 
your users a consistent user experience irrespective of what version of 
Android they’re using without making your app look old-fashioned? 
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support libraries 


Support libraries allow you to use new 
features in older versions of Android 

The Android team solved this problem by coming up with the idea of 

Support Libraries. 

The Android Support Libraries provide backward compatibility with older 
versions of Android. They sit outside the main release of Android, and contain 
new Android features that developers can use in the apps they’re building. 

The Support Libraries mean that you can give users on older devices the 
same experience as users on newer devices even if they’re using different versions of 
Android. 

Here are some of the Support Libraries that are available for you to use: 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


v4 Support Library 

Includes the largest set of features, such 
as support for application components 
and user interface features. 


v7 AppCompat Library 

Includes support for app bars. 



v7 Cardview Library 

Adds support for the CardView 
widget, allowing you to show 
information inside cards. 



Constraint Layout Library 



Allows you to create constraint 
layouts. You used features from 
this library in Chapter 6. 

v7 RecyclerView Library 

Adds support for the 
RecyclerView widget. 


Design Support Library 

Adds support for extra 
components such as tabs and 
navigation drawers. 


These are just some ot 
■the Suyyort Libraries. 


Each library includes a specific set of features. 

The v7 AppCompat Library contains a set of up-to-date themes that can be 
used with older versions of Android: in practice, they can be used with nearly 
all devices, as most people are using API level 19 or above. We’re going to 
use the v7 AppCompat Library by applying one of the themes it contains 
to our app. This will add an app bar that will look up-to-date and work the 
same on all versions of Android that we’re targeting. Whenever you want to 
use one of the Support Libraries, you first need to add it to your app. We’ll 
look at how you do this after we’ve created the project. 


294 Chapter 8 



Create the Pizza app 

We’ll start by creating a prototype of the Pizza app. Create a new 
Android project for an application named “Bits and Pizzas” with a 
company domain of “hfad.com”, making the package name com. 
hfad.bitsandpizzas. The minimum SDK should be API level 
19 so that it works with most devices. You’ll need an empty activity 
called “MainActivity” and a layout called “activity_main”. Make 
sure you check the Backwards Compatibility (AppCompat) 
checkbox (you’ll see why a few pages ahead). 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 



Next, we’ll look at how you add a Support Library to the project. 
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AppCompat support library 


Add the v7 AppCompat Support Library 

We’re going to use one of the themes from the v7 AppCompat Library, 
so we need to add the library to our project as a dependency. Doing so 
means that the library gets included in your app, and downloaded to 
the user’s device. 

To manage the Support Library files that are included in your project, 
choose File—^Project Structure. Then click on the app module and 
choose Dependencies. You’ll be presented with the following screen: 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


@ O O 


Project Structure 


+ - 

SDK Location 
Project 

Developer Se.. 
Ads 

Authentica... 

Notifications 

Modules — 


Properties Signing Flavors Build Types 


Dependencies 



Scope 

{imclude=[*.jarj, cfir= libs] 

Compile 

androidTestCannpiieCcom.android.suppart.test.espressQiespressQ- 

-core:2.2.2 

m c Dim . a n d roi 6 . s upport. c on s tra int: constra in t- 1 ayoutil.O.Z 

Compile 

m j unit :j unit :4.1Z 

Test compile ▼ 

com.and mid. sup port:a p p com pat-v7 :2 5,3,0 

Compile 


The Pependendies opW shows you -the 
SwPPov-t Libraries that have been added to 
your yrojedt- Android Studio will probably 
have added some tor you automatidally 



Android Studio may have already added the AppCompat Support 
Library for you automatically. If so, you will see it listed as 
appcompat-v7, as shown above. 

If the AppCompat Library hasn’t been added for you, you will need to 
add it yourself. Click on the “+” button at the bottom or right side of 
the Project Structure screen. Choose the Library Dependency option, 
select the appcompat-v7 library, then click on the OK button. Click on 
OK again to save your changes and close the Project Structure window. 

Once the AppCompat Support Library has been added to your project, 
you can use its resources in your app. In our case, we want to apply one 
of its themes in order to give MainActivity an app bar. Before we 
do that, however, we need to look at the type of activity we’re using for 
MainActivity. 
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support libraries and app bars 


AppCompatActivity lets you use AppCompat themes 

So far, all of the activities we’ve created have extended the Activity class. 

This is the base class for all activities, and it’s what makes your activity an 
activity. If you want to use the AppCompat themes, however, you need to use a 
special kind of activity, called an AppCompatActivity, instead. 

The AppCompatActivity class is a subclass of Activity. It lives in the 
AppCompat Support Library, and it’s designed to work with the AppCompat 
themes. Your activity needs to extend the AppCompatActivity class 
instead of the Activity class whenever you want an app bar that 
provides backward compatibility with older versions of Android. 

As AppCompatActivity is a subclass of the Activity class, everything 
you’ve learned about activities so far still applies. AppCompatActivity 
works with layouts in just the same way, and inherits all the lifecycle methods 
from the Activity class. The main difference is that, compared to 
Activity, AppCompatActivity contains extra smarts that allow it to 
work with the themes from the AppCompat Support Library. 

Here’s a diagram showing the AppCompatActivity class hierarchy: 



Activity class 

(android.app.Activity) 

The Activity class implements 
default versions of the lifecycle methods. 


FragmentActivity class 

(android.support.v4.app.FragmentActivity) 

The base class for activities that need to use support fragments. 
You’ll find out about fragments in the next chapter. 

AppCompatActivity class 

(android.support.v7.app.AppCompatActivity) 

The base class for activities that use the Support Library app bar. 

YourActivity class 

(com.hfad.foo) 


We’ll make sure MainActivity extends AppCompatActivity on the next page. 
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MainActivity code 


MainActivity needs to be an AppCompatActivity 

We want to use one of the AppGompat themes, so we need to make 
sure our activities extend the AppCompatActivity class instead of 
the Activity class. Happily, this should already be the case if you 
checked the Backwards Compatibility (AppCompat) checkbox when 
you first created the activity. Open the file MainActivity.java , then make 
sure your code matches ours below: 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


package com.hfad.bitsandpizzas; 




The ApyComyatMivi-ty tlass lives m 
the v7 /lyyComyat Support Library- 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

public class MainActivity extends AppCompatActivity { 

/Wake sure your activity extends AppCompatActivity. 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 


□ 


BitsAndPizzas 


■ 

app/src/main 

M3 


java 




com.hfad.bitsandpizzas 

L @ 

MainActivity.java 


} 


} 


Now that we’ve confirmed that our activity extends 
AppCompatActivity, we can add an app bar by applying a 
theme from the AppGompat Support Library. You apply a theme 
in the app’s AndroidManifest.xml file, so we’ll look at this file next. 


tliereicire no 

Dumb Questions 


O: What versions of Android can the 
Support Libraries be used with? 


It depends on the version of the 
Support Library. Prior to version 24.2.0, 
Libraries prefixed with v4 could be used 
with API level 4 and above, and those 
prefixed with v7 could be used with API 
level 7 and above. When version 24.2.0 
of the Support Libraries was released, the 
minimum API for all Support Libraries 
became API level 9. The minimum API level 
is likely to increase in the future. 


n In earlier chapters, Android Studio 
gave me activities that already extended 
AppCompatActivity. Why’s that? 



I’ve seen code that extends 


Ac tionBarActivity. What’s 
that? 


When you create an activity in 
Android Studio, the wizard includes a 
checkbox asking if you want to create 
a Backwards Compatible (AppCompat) 
activity. If you left this checked in 
earlier chapters, Android Studio would 
have generated activities that extend 
AppCompatActivity. 


In older versions of the 
AppCompat Support Library, you used 
the ActionBarActivity 
class to add app bars. This was 
deprecated in version 22.1 in favor of 
AppCompatActivity. 
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support libraries and app bars 


AndroidManife$t.xml can change your app bar's appearance 


As you’ve seen earlier in the book, an app’s AndroidManifest.xml file provides 
essential information about the app, such as what activities it contains. It also 
includes a number of attributes that have a direct impact on your app bars. 

Here’s the AndroidManifest.xml code Android Studio created for us (we’ve 
highlighted the key areas): 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.hfad.bitsandpizzas"> 

application App , to „. /Urad SMfe 


□ 
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app/src/main 

l</XmlI 

AndroidManifest.xml 


provides i£ons by dc'fsul't- 


android:allowBackup="true" 

android: icon=" @mipmap/ic_launcher " 
android: roundIcon=" @mipmap/ic_launcher_round" 
android: label="@string/app_name" user—-friendly name o( -the app 

android:supportsRtl="true" 

android: theme="@style/AppTheme"> "|Te 

<activity android:name=".MainActivity"> 



</activity> 
</application> 
</manifest> 



N ^ 

^ A u 14:30 | 

Bits and Pizzas 



The android: icon attribute assigns an icon to the app. The icon is used 
as the launcher icon for the app, and if the theme you’re using displays an 
icon in the app bar, it will use this icon, android: roundlcon may be 
used instead on devices running Android 7.1 or above. 

The icon is a mipmap resource. A mipmap is an image that can be used 
for application icons, and they’re held in mipmap * folders in app/src/main/ 
res. Just as with drawables, you can add different images for different screen 
densities by adding them to an appropriately named mipmap folder. As an 
example, an icon in the mipmap-hdpi folder will be used by devices with 
high-density screens. You refer to mipmap resources in your layout using @ 
mipmap. 

The android: label attribute describes a user-friendly label that 
gets displayed in the app bar. In the code above, it’s used in the 
<application> tag to apply a label to the entire app. You can also add it 
to the <activity> tag to assign a label to a single activity. 

The android: theme attribute specifies the theme. Using this attribute in 
the <application> element applies the theme to the entire app. Using it 
in the <activity> element applies the theme to a single activity. 

We’ll look at how you apply the theme on the next page. 


—-re¬ 

tires 

EDdrawable 

► E] layout 

► E] mipmap-hdpi 

▼ E]mipmap-mdpi 

0 icjauncher.png 
0 ic_launcher_round.png 

▼ EDmipmap-xhdpi 

0 icjauncher.png 
0 icJauncher_round.png 

▼ E] mipmap-xxhdpi 

0 icjauncher.png 
0 icJauncher_round.png 

▼ EDmipmap-xxxhdpi 

0 icjauncher.png 
0 icJauncher_round.png 
lvalit 


oid Studio automatically added 
-to ouV mipmap* -foldevs when 
reated the pv-oject- 
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apply a theme 


How to apply a theme 

When you want to apply a theme to your app, you have two main options: 


o 

o 


Hardcode the theme in AndroidManifest.xml. 
Apply the theme using a style. 


Let’s look at these two approaches. 


1. Hardcodiwg the theme 

To hardcode the theme in AndroidManifest.xml , you update the 
android: theme attribute in the file to specify the name of the 
theme you want to use. As an example, to apply a theme with a 
light background and a dark app bar, you’d use: 

Application 


android:theme="Theme.AppCompat.Light.DarkActionBar"> 


This approach works well if you want to apply a basic theme 
without making any changes to it. 

t . Using a style to apply the theme 


This is a simple way applying a 
basid theme, but it means you dan'-fc, 
-rov example, dhange its dolors. 


Most of the time, you’ll want to apply the theme using a style, as 
this approach enables you to tweak the theme’s appearance. You 
may want to override the theme’s main colors to reflect your app’s 
brand, for example. 


To apply a theme using a style, you update the android: theme 
attribute in AndroidManifest.xml to the name of a style resource 
(which you then need to create). In our case, we’re going 
to use a style resource named AppTheme, so update the 
android: theme attribute in your version oi AndroidManifest.xml 
to the following: 


application Mvoid SUo 

{p your version o-f /indroidManKCsk*ml. 

android:theme= M @ style/AppTheme"> 


•this 


The @ style prefix tells Android that the theme the app’s using is 
a style that’s defined in a style resource file. We’ll look at this 
next. 


□ 
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AndroidManifest.xml 
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Pefine styles in a style resource file 

The style resource file holds details of any themes and styles you 
want to use in your app. When you create a project in Android 
Studio, the IDE will usually create a default style resource file for 
you called styles.xml located in the app/src/main/res/values folder. 

If Android Studio hasn’t created the file, you’ll need to add it 
yourself Switch to the Project view of Android Studio’s explorer, 
highlight the app/src/main/res/values folder, go to the File menu, 
and choose New. Then choose the option to create a new Values 
resource file, and when prompted, name the file “styles”. When 
you click on OK, Android Studio will create the file for you. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


A basic style resource file looks like this: , 

^Tbis is tbe tbeme used in the app. 

<resources> v/ 

<style name= M AppTheme M parent="Theme.AppCompat.Light.DarkActionBar"> 


^"^Tbere may be e*tra Code here to 
</style> eustomiz* the theme. Well look 
</resources> at this d Couple of pages ahead- 


A style resource file can contain one or more styles. Each style is 
defined through the <style> element. 

Each style must have a name, which you define with the name 
attribute; for example: 

name="AppTheme" 

In the code above, the style has a name of "AppTheme", and 
AndroidManifest.xml can refer to it using "@style/AppTheme". 

The parent attribute specifies where the style should inherit its 
properties from; for example: 

parent="Theme.AppCompat.Light.DarkActionBar" 


This gives the app a theme of "Theme. AppCompat. Light. 

DarkActionBar", which gives activities a light background, with 
a dark app bar. We’ll look at some more of Android’s available 
themes on the next page. 


□ 
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413 

app/sre/main 

hhj 



values 



styles.xml 


Tbe app bar bas a dark 
background with white te%t- 



"W A Q 14:30 | 

Bits and Pizzas 



Hello World! 



The main activity 
background is 
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themes 


Theme gallery 

Android comes with a whole bunch of built-in themes that you 
can use in your apps. Here are just a few of them: 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


Theme.AppCompat. Light 



Theme.AppCompat.Light.NoActionBar 



Theme.AppCompat.Light.DarkActionBar 



Theme.AppCompat 



and a dark app bar. 

Theme.AppCompatNoActionBar 



There's also a DayNiah-t -theme, 
which uses one sei o\ dolors in -the 
day, and ano-ther se-t a-t nijh-t- 


The theme determines the basic appearance of the app, such as the 
color of the app bar and any views. But what if you want to modify 
the app’s appearance? 
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Customize the look of your app 

You can use customize the look of your app by overriding the properties 
of an existing theme in the style resource file. For example, you can 
change the color of the app bar, the status bar, and any UI controls. 
You override the theme by adding <item> elements to the <style> 
to describe each modification you want to make. 

We’re going to override three of the colors used by our theme. To do 
this, make sure that your version of styles.xml matches ours below: 

<resources> 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


□ 
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-■ 

app/src/main 

4H 


es „ 

MU 

values 


<!-- Base application theme. --> 

<style name= n AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 

<!-- Customize your theme here. --> 

<item name="colorPrimary M >@color/colorPrimary</item> 

<item name="colorPrimaryDark">@color/colorPrimaryDark</item> 

<item name="colorAccent">@color/colorAccent</item>^''" -j-^ csc | mCS to&t 

modity "the -theme by eba^m^ 


styles.xml 


</style> 
</resources> 


three the Colors. 


The above code includes three modifications, each one described by a 
separate <item>. Each <item> has a name attribute that indicates 
what part of the theme you want to change, and a value that specifies 
what you want to change it to, like this: 

<item name= n colorPrimary TT >@color/colorPrimaryK/item> 


This will dhanje -the dolorPrimary part o-f -the 
■theme so it has a value o-P @dolor/dolorPrimary. 

name="colorPrimary" refers to the main color you 
want to use for your app. This color gets used for your app 
bar, and to “brand” your app with a particular color. 

name="colorPrimaryDark" is a darker variant of 
your main color. It gets used as the color of the status bar. 

name="colorAccent" refers to the color of any UI 
controls such as editable text views or checkboxes. 

You set a new color for each of these areas by giving each 
<item> a value. The value can either be a hardcoded 
hexadecimal color value, or a reference to a color resource. 
We’ll look at color resources on the next page. 


dolorPrimary dolorPrimaryPark is the 

is the dolor op dolor <£ the status bar. 



There are a whole host o£ other theme properties 
you dar> dharge, but weVe hot £,oVCV ' *tbem 

here- To -find out more, visit https ; //developer, 
ahdroiddom/$uide/topids/ui/themes.html 
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color resources 


Refine colors in a color resource file 

A color resource file is similar to a String resource file except that it 
contains colors instead of Strings. Using a color resource file makes it 
easy to make changes to the color scheme of your app, as all the colors 
you want to use are held in one place. 

The color resource file is usually called colors.xml , and it’s located in the 
app/src/main/res/values folder. When you create a project in Android 
Studio, the IDE will usually create this file for you. 

If Android Studio hasn’t created the file, you’ll need to add it yourself. 
Switch to the Project view of Android Studio’s explorer, highlight the 
app/src/main/res/values folder, go to the File menu, and choose New. 
Then choose the option to create a new Values resource file, and when 
prompted, name the file “colors”. When you click on OK, Android 
Studio will create the file for you. 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


Next, open colors.xml and make sure that your version of the file 
matches ours below: 

BitsAndPizzas 



<?xml version="1.0" encoding= M utf-8 M ?> 

<resources> 

<color name= M colorPrimary M >#3F51B5</color> 

Ccolor name= M colorPrimaryDark M >#303F9F</color> 

<color name= M colorAccent M >#FF4081</color> o( these is 

</resources> 


4B 

app/sre/main 


8 Co\oy vesouvde. 


values 


The code above defines three color resources. Each one has a name 
and a value. The value is a hexadecimal color value: 


colors.xml 


This says it’s a dolov vesouv£e- 

<color name= n colo rTri mary TT >#3F51B^ /color> 

The £olov- resource has a name o( ^olorPrimary” 
and a value (blue). 



The style resource file looks up colors from the color resource file 
using @color/colorName. For example: 

<item name="colorPrimary">@color/colorPrimary</item> 


overrides the primary color used in the theme with the value of 
co lor Primary in the color resource file. 

Now that we’ve seen how to add an app bar by applying a theme, let’s 
update MainActivity’s layout and take the app for a test drive. 
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The code for activity_wain.xwl 

For MainActivity’s layout, we’re going to display some 
default text in a linear layout. Here’s the code to do that; 
update your version of activity_main.xml to match ours below: 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


<?xml version= M l.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android= M http://schemas.android.com/apk/res/android 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width= M match_parent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 
android:padding="16dp" 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 


□ 

BitsAndPizzas 

H3 

app/src/main 

res _ 
layout 


<TextView 

android:layout_width="wrap_content" 

android:layout_height="wrap_content" 

android: text=" Hello World!" /> ± j- i . 

V— We re just displaying some basic placeholder 

</LinearLayout> text in /HainAetivity's layout because right 

_ n0VJ w « you to -focus on app bars. 


activity_ 

main.xml 


Test drive the app 


When you run the app, MainActivity gets displayed. At the top 
of the activity there’s an app bar. 


This is the app bar. The 
default Color’s been 
overridden so that it's blue- 


N 

WA U 16:16 1 
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Hello World! 


The background is light as we've used a theme 

o( Theme-AfpCompatLightParkActionBar. This 

theme also gives us dark text in the main body o-f 
the activity, and white text in the app bar. 


^—The status 

bar s de-fault 
Color has been 
overridden so 
it's a darker 
shade o-f blue 
than the app 
bar. 


That’s everything you need to apply a basic app bar in your activities. 
Why not experiment with changing the theme and colors? Then 
when you’re ready, turn the page and we’ll move on to the next step. 
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toolbars 


ActionParvs. Toolbar 

So far, you’ve seen how to add a basic app bar to the activities in 
your app by applying a theme that includes an app bar. Adding an 
app bar in this way is easy, but it has one disadvantage: it doesn’t 
necessarily include all the latest app bar features. 

Behind the scenes, any activity that acquires an app bar via a 
theme uses the ActionBar class for its app bar. The most recent 
app bar features, however, have been added to the Toolbar class 
in the AppGompat Support Library instead. This means that if 
you want to use the most recent app bar features in your app, you 
need to use the Toolbar class from the Support Library. 

Using the Toolbar class also gives you more flexibility. A toolbar 
is a type of view that you add to your layout just as you would any 
other type of view, and this makes it much easier to position and 
control than a basic app bar. 



V 

Basic app bar 

-► 


Toolbar 



Action 



Up button 


— 

Share action 

N 


* ^ Q 12:15 ■ 

Bits and Pizzas 


1 



A toolbar looks just like the a?? bar 
you bad previously, but it jives you mov-e 
■flexibility and includes tbe most retent 
app bav- -fcatuv-cs. 


How to add a toolbar 

We’re going to change our activity so that it uses a toolbar from 
the Support Library for its app bar. Whenever you want to use the 
Toolbar class from the Support Library, there are a number of 
steps you need to perform: 


o 

o 

© 

© 

© 


Add the v7 AppCompat Support Library as a dependency. 

This is necessary because the Toolbar class lives in this library. 

Make sure your activity extends the AppCompatActivity class. 

Your activity must extend AppCompatActivity (or one of its subclasses) 
in order to use the Support Library toolbar. 

Remove the existing app bar. 

You do this by changing the theme to one that doesn’t include an app bar. 

Add a toolbar to the layout. 

The toolbar is a type of view, so you can position it where you want and 
control its appearance. 

Update the activity to set the toolbar as the activity's app bar. 

This allows the activity to respond to the toolbar. 


We’ll go through these steps now. 
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support libraries and app bars 


1. Add the AppCompat Support Library 

Before you can use the Toolbar class from the Support Library in 
your activities, you need to make sure that the v7 AppCompat Support 
Library has been added to your project as a dependency. In our 
particular case, the library has already been added to our project, as we 
needed it for the AppCompat themes. 

To double-check that the Support Library is there, in Android Studio 
choose File—^Project Structure, click on the app module, and choose 
Dependencies. You should see the v7 AppCompat Library listed as 
shown below: 


Basic app bar 
Toolbar 
Action 
Up button 
Share action 



Extend the AppCompatActivity class 


When you want to use a theme from the AppCompat 
Library, you have to make sure that your activities extend the 
AppCompatActivity class. This is also the case if you want to use a 
toolbar from the Support Library as your app bar. 



We’ve already completed this step because, earlier in this chapter, we 
changed MainActivity.java to use AppCompatActivity: 

import android.support.v7.app.AppCompatActivity; 


BitsAndPizzas 

L CZ3 

app/src/main 

■ 

Tq 


public class MainActivity extends AppCompatActivity { 

I Ovf MainAttwity *«<»7 AffCo*.fatAct"''ty* 


com. hfad.bitsand pizzas 



MainActivity.java 


The next thing we need to do is remove the existing app bar. 
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NoActionBar theme 


3 . Remove the app bar 

You remove the existing app bar in exactly the same way that you add 
one—by applying a theme. 

When we wanted to add an app bar to our app, we applied a theme 
that displayed one. To do this, we used the theme attribute in 
AndroidManifest.xml to apply a style called AppTheme: 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.hfad.bitsandpizzas"> 

<application 


□ 


BitsAndPizzas 


android:theme="@ s tyle/AppTheme"> 

a: 

TW.s looks up tbe tbeme torn styles*m|. 

</application> 


Hr] 


app/src/main 

AndroidManifest.xml 


</manifest> 


The theme was then defined in styles.xml like this: 

This is the ^ herne vt'ct usmg. II displays a dark app bar. 

<resources> S 1 '» 

<style name="AppTheme" parent=" Theme.AppCompat.Light.DarkActionBar"> 


</style> 

</resources> 

The theme Theme .AppCompat. Light. DarkActionBar gives 
your activity a light background with a dark app bar. To remove the 
app bar, we’re going to change the theme to Theme . AppCompat. 
Light .NoActionBar instead. Your activity will look the same as it 
did before except that no app bar will be displayed. 

To change the theme, update styles.xml like this: 

<resources> 


□ 

BitsAndPizzas 

KT3 

app/src/main 

ma 



values 



styles.xml 


<style name="AppTheme" parent="Theme.AppCompat.Light. &cHekNoActionBar"> 


We. £us-torniz*d -the -theme by 
</style> ovmid’mg some o( -the dolors. 
</resources> Y^ leave ibis Lo&t in plade- 


T 

Change tbe -tbeme -from ParkAt-tioxBar -to 
KoAd-tiorBar. This removes tbe app bar. 


Now that we’ve removed the current app bar, we can add the toolbar. 
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4. Add a toolbar to the layout 

As we said earlier, a toolbar is a view that you add to your layout. 
Toolbar code looks like this: 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


J This de-f 'mes the -toolbar 

<android.support.v7.widget.Toolbar 

android:id="@+id/toolbar" ^— fy'tt the toolbar an IV so you dan re-Per to it in your activity tode 
android: layout_width= M match_j?arent" ^ "toolbar’s sizjC- 
android:layout_height="?attr/actionBarSize M 

android:background^'?attr/colorPrimary M ^— These £on"trol -the app bar’s appearance- 
android:theme="Qstyle/ThemeOverlay.AppCompat.Dark.ActionBar" /> 


You start by defining the toolbar using: 


<android.support.v7.widget.Toolbar 

... /> 


This is -the -Pull pa-th o( -the Toolbar 
^lass in "the Support Library. 


where android. support. v7 . widget. Toolbar is the fully 
qualified path of the Toolbar class in the Support Library. 

Once the toolbar has been defined, you then use other view attributes 
to give it an ID, and specify its appearance. As an example, to make 
the toolbar as wide as its parent and as tall as the default app bar size 
from the underlying theme, you’d use: 

-- __ The -toolbav is as wide as its parent, 

android: layout_width="match_parent"^ a$ as ^ default app bar. 

android:layout_height="?attr/actionBarSize" ^ 


The ?attr prefix means that you want to use an attribute from the 
current theme. In this particular case, ?attr/actionBarSizeis 
the height of an app bar that’s specified in our theme. 


You can also change your toolbar’s appearance so that it has a similar 
appearance to the app bar that we had before. To do this, you can 
change the background color, and apply a theme overlay like this: 


android:background= M ?attr/colorPrimary" 




Make -the toolbar’s batk^round the same 
dolor as the app bar we had previously. 


android:theme= M @style/ThemeOverlay.AppCompat.Dark.ActionBar" 


A theme overlay is a special type of theme that alters the current theme 
by overwriting some of its attributes. We want our toolbar to look 
like our app bar did when we used a theme of Theme . AppCompat. 
Light. DarkActionBar, so we’re using a theme overlay of 
ThemeOverlay.AppCompat.Dark.ActionBar. 

On the next page we’ll add the toolbar to the layout. 


T 

This jives -the "toolbar "the same 
appearance as -the app bar we bad 
berore- IVe have "to use a "theme overlay, 
as -the bloftct ionBar -theme doesn’-t 
s-tyle app bars in -tbe same way as -tbe 
Dark/taiionBar "theme did- 
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we’re not doing this (in our app) 


Add the toolbar to the layout... 

If your app contains a single activity, you can add the toolbar to your 
layout just as you would any other view. Here is an example of the 
sort of code you would use in this situation (we’re using a different 
approach, so don’t update your layout with the code below): 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


<?xml version="1.0" encoding="utf-8"?> 

CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 


The Lo&t hev-e 
does^-t include 
any padding. 
This is so -tha-fe 
•the -toolbav- 
■f ills ihe screen 
horizontally. 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 
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Kn 

app/sre/main 

k a 


This £ode displays 
the toolbar at the 
top ot the activity. 


CO 

layout 


activity_ 

main.xml 


<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
android:background="?attr/colorPrimary" 

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

^ Later in the dhapter well add a sedond 

<TextView activity to our app, so were not using this 

android: layout_width="wrap_content" approadh- So you don*t need to dhange your 

layout dode to r^atdh this pie- 


android:layout_height="wrap_content 
android:text="Hello World!" /> 

</LinearLayout> 


Were using a linear layout, so -the text 
view will be positioned below the toolbar. 


This code displays the toolbar at the top of the activity. We’ve 
positioned the text view Android Studio gave us so that it’s displayed 
underneath the toolbar. Remember that a toolbar is a view like 
any other view, so you need to take this into account when you’re 
positioning your other views. 


Adding the toolbar code to your layout works well if your app contains 
a single activity, as it means that all the code relating to your activity’s 
appearance is in a single file. It works less well, however, if your app 
contains multiple activities. If you wanted to display a toolbar in 
multiple activities, you would need to define the toolbar in the layout of 
each activity. This means that if you wanted to change the style of the 
toolbar in some way, you’d need to edit every single layout file. 


So what’s the alternative? 
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...or define the toolbar as a separate layout 

An alternative approach is to define the toolbar in a separate layout, 
and then include the toolbar layout in each activity. This means 
that you only need to define the toolbar once, and if you want to 
change the style of your toolbar, you only need to edit one file. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 



MainAc+ivi+y 



ac+ivi+y_main 


+oolbar_main 


MamA^tivi-ty has a 

layout, actwityj^am- 


a£tivity_r*a'm doesn't 
explicitly Cohtaih the 
toolbar Code. Instead, it 
Cohtaihs a reterehCe to 
the toolbars layout- 


The toolbar's layout is 
ton-tamed in a separate tile- 
|t your adtivity ton-tains 
multiple at-tivi-ties, eath one tan 
vetevente the toolbar's layout- 


We ? re going to use this approach in our app. Start by creating a 
new layout file. Switch to the Project view of Android Studio’s explorer, 
highlight the app/sre/res/main/layout folder in Android Studio, then 
go to the File menu and choose New —> Layout resource file. When 
prompted, give the layout file a name of “toolbar_main” and then click 
on OK. This creates a new layout file called toolbarjmain.xml. 

Next, open toolbar jmain.xml^ and replace any code Android Studio has 
created for you with the following: 


□ 

BitsAndPizzas 

43 


<android.support.v7.widget.Toolbar 

xmlns:android="http://schemas.android.com/apk/res/android" 


app/sre/main 


android:layout_width="match_j?arent" 
android:layout_height= M ?attr/actionBarSize M 
android:background^' ?attr/colorPrimary" 

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 




/> 



toolbar_ 

main.xml 


This code is almost identical to the toolbar code you’ve already seen. 
The main difference is that we’ve left out the toolbar’s id attribute, 
as we’ll define this in the activity’s main layout file activity_main.xml 
instead. 


This -toolbar dode goes m a 
separate layout tile so multiple 
activities da* retere*de it- 


On the next page we’ll look at how you include the toolbar layout in 
activity_main.xml. 
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include toolbar 


Include the toolbar in the activity's layout 

You can display one layout inside another using the <include> tag. 

This tag must contain a layout attribute that specifies the name of the 
layout you want to include. As an example, here’s how you would use 
the <include> tag to include the layout toolbar_main.xml: 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


<include 



layout= M @layout/toolbar_main" /> 


The (^layout -tells /Wvoid to look tov- 
a layout tailed toolbav_j*a'm. 


We want to include the toolbar_main layout in activity_main.xml 
Here’s our code; update your version of activity_main.xml to match ours: 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android= M http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 

android:orientation="vertical" ^ ?add ,^ S£) ^at the 

-toolbav- tills the scree* horizontally 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 


<include 




Include tbe toolbav-_j*aih layout 


layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 


I NtYt giving the -toolbar ah ID so we 
<TextView U* rth er to it ih our activity £ode. 

android:layout_width="wrap_content" 


android:layout_height="wrap_content" 
android:text="Hello World!" /> 


</LinearLayout> 


□ 

BitsAnd Pizzas 

HB 

app/sre/main 

MB 


activity_ 

main.xml 



Now that we’ve added the toolbar to the layout, there’s one more 
change we need to make. 
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5. Set the toolbar as the activity's app bar 

The final thing we need to do is tell MainActivity to use the 
toolbar as its app bar. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


So far we’ve only added the toolbar to the layout. While this 
means that the toolbar gets displayed at the top of the screen, 
the toolbar doesn’t yet have any app bar functionality. As an 
example, if you were to run the app at this point, you’d find that 
the title of the app isn’t displayed in the toolbar as it was in the 
app bar we had previously. 

To get the toolbar to behave like an app bar, we need to call 
the AppCompatActivity’s setSupportActionBar () 
method in the activity’s onCreate () method, which takes one 
parameter: the toolbar you want to set as the activity’s app bar. 

Here’s the code for MainActivity.java ; update your code to match 
ours: 


It you don't update your activity 
Code atter adding a toolbar to your 
layout, your toolbar will just appear 
as a plain strip with nothing in it- 



package com.hfad.bitsandpizzas; 


Bits And Pizzas 

import android.support.v7.app.AppCompatActivity; 
import android, os .Bundle; iVcVc using "the 

import android, support.v7 .widget.Toolbar; toolbar dass, so we 

need -fco impov~t it 


□ 

Pizz— 

KID 

app/sre/main 

La 


java 


public class MainActivity extends AppCompatActivity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
setSupportActionBar(toolbar); 3 ve-ferenCe "bo “the toolbar, and 

j T set it as the activity's app bar. 

} We reed to use setSupportActionBarO, as we're 

using the toolbar -from the Support Library. 


m 


com.hfad.bitsandpizzas 

Lir 


MainActivity.java 


That’s all the code that you need to replace the activity’s basic 
app bar with a toolbar. Let’s see how it looks. 
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test drive 



Test drive the app 

When you run the app, a new toolbar is displayed in place of the 
basic app bar we had before. It looks similar to the app bar, but 
as it’s based on the Support Library Toolbar class, it includes 
all the latest Android app bar functionality. 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 



H-evVs ouv new "toolbav-. It looks 
like the app bav we bad be-fov-e, 
but it gives you more -flexibility- 


You’ve seen how to add an app bar, and how to replace the basic 
app bar with a toolbar. Over the next few pages we’ll look at how 
to add extra functionaility to the app bar. 


O: You’ve mentioned app bars, action 
bars, and toolbars. Is there a difference? 


An app bar is the bar that usually 
appears at the top of your activities. It’s 
sometimes called an action bar because 
in earlier versions of Android, the only way 
of implementing an app bar was via the 
ActionBar class. 


The ActionBar class is used behind 
the scenes when you add an app bar by 
applying a theme. If your app doesn’t rely 
on any new app bar features, this may be 
sufficient for your app. 

An alternative way of adding an app 
bar is to implement a toolbar using the 
Toolbar class. The result looks similar 
to the default theme-based app bar, but it 
includes newer features of Android. 


th&Y&icdce no 

Dumb Questions 


o; I’ve added a toolbar to my activity, 
but when I run the app, it just looks like 
a band across the top of the screen. It 
doesn’t even include the app name. 
Why’s that? 

First, check AndroidManifest.xml and 
make sure that your app has been given a 
label. This is where the app bar gets the 
app’s name from. 

Also, check that your activity calls the 
setSupportActionBar() 
method in its onCreate () method, as 
this sets the toolbar as the activity’s app bar. 
Without it, the name of the app or activity 
won’t get displayed in the toolbar. 


Q: I’ve seen the <include> tag in 
some of the code that Android Studio 
has created for me. What does it do? 


The <include> tag is used 
to include one layout inside another. 
Depending on what version of Android 
Studio you’re using and what type of project 
you create, Android Studio may split your 
layout code into one or more separate 
layouts. 
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Add actions to the app bar 

In most of the apps you create, you’ll probably want to add actions 
to the app bar. These are buttons or text in the app bar that you click 
on to make something happen. We’re going to add a “Create Order” 
button to the app bar. When you click on it, it will start a new activity 
we’ll create called OrderActivity: 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__ 



Well create a new 
Create Order action 
that will start 
Ov-dev-/\ct'wity- 


Create OrderActivity 


We’ll start by creating OrderActivity. Select the com.hfad. 

bitsandpizzas package in the app/src/main/java folder, then go |-f prompted the 

to File—>New...—^Activity—>Empty Activity. Name the activity dtfcwfcys source lan^ua^e* 
“OrderActivity”, name the layout “activity_order”, make sure the select *tbe option -for 
package name is com.hfad.bitsandpizzas, and check Java, 
the Backwards Compatibility (AppCompat) checkbox. 



We want OrderActivity to display the same toolbar as 
MainActivity. See if you can complete the code for activity_ 
order.xml below to display the toolbar. 


<?xml version=" 1 . 0 " encoding="utf- 8 "?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools : context="com. hfad.bitsandpizzas . OrderActivity"> £ode -Por adding tbe 

-toolbar needs -to 50 here- 


</LinearLayout> 
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solution 


i! Solution 


We want OrderActivity to display the same toolbar as 
MainActivity. See if you can complete the code for activity_ 
order.xml below to display the toolbar. 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.OrderActivity"> 


<mftlbde This is the same tode that we had m 

. /HamAttivity- It includes the toolbav_mam 

layoui-'^layout/ioolbavyjr*a‘m” layout m a£twrty__ordev-. 

a^dvoidiid—^+id/toolbar” /> 


</LinearLayout> 


Update activity_order.xwl 


We’ll start by updating activity_order.xml so that it displays a toolbar. The 
toolbar will use the same layout we created earlier. 

Here’s our code; update yours so that it matches ours: 


<?xml version="l.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.OrderActivity"> 


□ 


BitsAndPizzas 


Ha 

app/src/main 

K3 


<incl«de «■ Add Ultav lay~t« a«atad 

layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 

</LinearLayout> 



activity_ 

order.xml 
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Update OrderActivity.java 

Next we’ll update OrderActivity so that it uses the toolbar we 
set up in the layout as its app bar. To do this, we need to call the 
setSupportActionBar () method, passing in the toolbar as a 
parameter, just as we did before. 

Here’s the full code for OrderActivity.java ; update your version of the 
code so that it matches ours: 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__ 


package com.hfad.bitsandpizzas; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 


□ 

BitsAndPizzas 

mi 

app/src/main 

H3 


java 


public class OrderActivity extends AppCompatActivity { 

@Override Make sure ike activity e*te*ds AppCompatActiv.ty- 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_order); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar(toolbar); 


} 

Set the toolbar as the activity s app bar. 


ms 


com.hfad.bitsandpizzas 

L 0 

OrderActivity.java 


Add a String resource for the activity's title 

Before we move on to creating an action to start OrderActivity, 
there’s one more change we’re going to make. We want to make it 
obvious to users when OrderActivity gets started, so we’re going to 
change the text that’s displayed in OrderActivity’s app bar to make 
it say “Create Order” rather than the name of the app. 

To do this, we’ll start by adding a String resource for the activity’s title. 
Open the file strings.xml in the app/src/main/res/values folder, then add the 
following resource: 

<string name= M create_order M >Create Order</string> 

We’ll update the text that gets displayed in the app bar on the next page. 


□ 

BitsAndPizzas 

4■ 

app/src/main 

L Q 


Wit'll use this to 
display "Create 
Order" m 

Order MtWity's 

app bar. 



strings.xml 
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add a label 


Change the app bar text by adding a label 

As you saw earlier in the chapter, you tell Android what text to display 
in the app bar by using the label attribute in file AndroidManifest.xml. 

Here’s our current code for AndroidManifest.xml. As you can see, the 
code includes a label attribute of@string/app_name inside the 
<application> element. This means that the name of the app gets 
displayed in the app bar for the entire app. 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


<?xml version="l.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android 
package="com.hfad.bitsandpizzas"> 

Application 

android:allowBackup="true" 
android:icon="@mipmap/ic_launcher M 


□ 


BitsAndPizzas 


MT3 


android:roundIcon="Qmipmap/ic_launcher_round" 

The label attribute •tells 
Android what tent to 
display in the app bar. 

android:theme="@style/AppTheme"> 


android:label="@string/app_name" 

android:supportsRtl="true" 


app/src/main 

]</ Xmll 

AndroidManifest.xml 


<activity android:name=" .MainActivity"> “v-This is the entry tor MainAdtivity 

that we had be-rore- 


</activity> 


<activity android:name=".OrderActivity"> 
</activity> 


</application> 
</manifest> 


This is the entry tor 
OrderAdtWity- Android 
added this tor us when we 
dreated the new adtivity- 


We want to override the label for Order Activity so that the text 
“Create Order” gets displayed in the app bar whenever OrderActivity 
has the focus. To do this, we’ll add a new label attribute to 
OrderActivity’s <activity> element to display the new text: 


Activity 

android:name=".OrderActivity" 

android:label="@ string/create_order"> 

</activity> 


Adding a label -to an adtwity means 
-that tor this adtWity,the adtivity S 
label jets displayed in its app bar 
instead ot the app's label- 


We’ll show you this code in context on the next page. 
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The code for AndroidManifest.xwl 

Here’s our code for AndroidManifest.xml. Update your code to reflect 
our changes. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__ 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.hfad.bitsandpizzas"> 

Application The apf's label IS -the BitsAndPizzas 


□ 




dc-fauli label £or tbe 


android: label=" @string/app_name" entire app- 
• • • > We don't need to change 

— tbe CoAt ( or Ma'mA^tivity. 

<activity android: name=" .MainActivity"> MainA^tivity bas no 

label o-f its own, so it 
will use the label in the 
<applieation> element- 


4T3 

app/sre/main 

l</*mll 

AndroidManifest.xml 


</activity> 


<activity android:name=".OrderActivity" 

android:label="@string/create_order"> 
</activity> ^ 

Adding a label to OrderActivity overrides the 
</application> app*s label -for this activity- It means that 

</manifest> different text gets displayed in the app bar. 


That’s everything we need for OrderActivity. Next we’ll look at 
how you add an action to the app bar so that we can start it. 


How to add an action to an app bar 

To add an action to the app bar, you need to do four things: 


o 

G 

O 

O 


Add resources for the action's icon and text. 

Define the action in a menu resource file. 

This tells Android what actions you want on the app bar. 

Set the activity to add the menu resource to the app bar. 

You do this by implementing the onCreateOptionsMenu () method. 

Add code to say what the action should do when clicked. 


You do this by implementing the onOptionsItemSelected () method. 
We’ll start by adding the action’s icon and text resources. 
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add resources 


1. Add the action's resources 

When you add an action to an app bar, you generally assign it 
an icon and a short text title. The icon usually gets displayed if 
the action appears in the main area of the app bar. If the action 
doesn’t fit in the main area, it’s automatically moved to the app 
bar overflow, and the title appears instead. 

We’ll start with the icon. 

Add the icon 


v 


Basic app bar 
Toolbar 
Action 
Up button 
Share action 



This is -the app bar's 
over-flow- Android 
moves actions into the 
ovev-*fl ow that don t 
-f it or\ the main av-ea 
o( the app bav. 


If you want to display your action as an icon, you can either 
create your own icon from scratch or use one of the icons 
provided by Google. You can find the Google icons here: 
https:/ / material.io/ icons/. 

We’re going to use the “add” icon ic_add_white_2 4dp, 
and we’ll add a version of it to our project’s drawable* folders, 
one for each screen density. Android will decide at runtime 
which version of the icon to use depending on the screen 
density of the device. 

First, switch to the Project view of Android Studio’s explorer 
if you haven’t done so already, highlight the app /src /main /res 
folder, and then create folders called drawable-hdpi , drawable-mdpi , 
drawable- xhdpi, draw able-xxhdpi, and drawable-xxxhdpi if they’re 
not already there. Then go to https://git.io/v9oet, and download 
the ic_add_white_24dp.png Bits and Pizzas images. Add the 
image in the drawable-hdpi folder to the drawable-hdpi folder in 
your project, then repeat this process for the other folders. 



the new action 


Add the action's title as a String resource 


In addition to adding an icon for the action, we’ll also add a 
title. This will get used if Android displays the action in the 
overflow area of the app bar, for example if there’s no space for 
the action in the main area of the app bar. 

We’ll create the title as a String resource. Open the file strings.xml 
in the app/src/main/res/values folder, then add the following 
String resource: 


□ 

Bits And Pizzas 

4a 

app/src/main 

K3 


<string name="create_order_title">Create Order</string> 

Now that we’ve added resources for the action’s icon and title, We II use this as the 

we can create the menu resource file. action iter»/s title. 



values 



strings.xml 
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1 . Create the menu resource file 

A menu resource file tells Android what actions you want to appear on 
the app bar. Your app can contain multiple menu resource files. For 
example, you can create a separate menu resource file for each set of 
actions; this is useful if you want different activities to display different 
actions on their app bars. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__ 


We’re going to create a new menu resource file called menu_main.xml in the 
folder app/src/main/res/menu. All menu resource files go in this folder. 

To create the menu resource file, select the app /src/main /res folder, go to 
the File menu, and choose New. Then choose the option to create a new 
Android resource file. You’ll be prompted for the name of the resource 
file and the type of resource. Give it a name of “menu_main” and a 
resource type of “Menu”, and make sure that the directory name is menu. 
When you click on OK, Android Studio will create the file for you , and 
add it to the app/src/ main/ res/ menu folder. 


/Wroid Studio may have already 
treated this tile tor you. It it 
has, simply reflate its tontents 
with the tode below. 


Here’s the code to add the new action. Replace the contents of menu_ 
main.xml with the code below: 


□ 


BitsAndPizzas 


<?xml version="1.0" encoding="utf-8"?> 

<menu xmlns:android="http://schemas.android.com/apk/res/android" 
^ xmlns:app="http://schemas.android.com/apk/res-auto"> 

The <menu> 

element <item android:id="@+id/action_create_order" 

identities 

android:title="@string/create_order_title" 
android:icon="@drawable/ic_add_white_24dp" 
android:orderInCategory="1" ^ 

The <item> element 
det'mes the attiom 


the tile 
as a menu 
vesouvte 
-file. 


app/src/main 

4T3 


app:showAsActions"ifRoom" /> 


4T3 


</menu> 


The menu resource file has a <menu> element at its root. Inside the 
<menu> element, you get a number of <item> elements, each one 
describing a separate action. In this particular case, we have a single 
action. 


menu_main.xml 


You use attributes of <item> to describe each action. The code creates 
an action with an id of action_create_order. This is so that 
we can refer to the action in our activity code, and respond to the user 
clicking on it. 


The action includes a number of other attributes that determine how 
the action appears on the app bar, such as its icon and text. We’ll look at 
these on the next page. 
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how your action looks 


Control the action's appearance 

Whenever you create an action to be displayed on the app bar, it’s likely 
you’ll want to display it as an icon. The icon can be any drawable resource. 
You set the icon using the icon attribute: 


v 


Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__.This is -the «a««e of the doable 

android: icon="@drawable/ic_add_white_24dp" rcs<M -u we wa*l to use as the iton- 


Sometimes Android can’t display the action’s icon. This may be because the 
action has no icon, or because the action is displayed in the app bar overflow 
instead of in the main area. For this reason, it’s a good idea to set an action’s 
title so that the action can display a short piece of text instead of an icon. You 

set the action’s title using the title attribute: tl / m i n i . 

6 I he title does* t always jet displayed, 

android: title="@string/create_order_titie" but ,- t s 3 jood idea io indude rt in ease 

"the aetion appeals in the over-Plow- 

If your app bar contains multiple actions, you might want to specify the order 
in which they appear. To do this, you use the orderlnCategory attribute, 
which takes an integer value that reflects the action’s order. Actions with a 
lower number will appear before actions with a higher number. 

/\* afrtio* with an ovdevInCatejovy of I will appeav 
android:orderInCategory="l" before an adtion with an ovdev-InCatejory of 10. 


Finally, the showAsAction attribute is used to say how you want the 
item to appear in the app bar. As an example, you can use it to get an 
item to appear in the overflow area rather than the main part of the app 
bar, or to place an item on the main app bar only if there’s room. The 
showAsAction attribute can take the following values: 


"ifRoom" 

Place the item in the app bar if there’s space. If there’s not space, put it in the 
overflow. 

"withText" 

Include the item’s title text. 

"never" 

Put the item in the overflow area, and never in the main app bar. 

"always" 

Always place the item in the main area of the app bar. This value should be 
used sparingly; if you apply this to many items, they may overlap each other. 


In our example, we want the action to appear on the main area of the app 
bar if there’s room, so we’re using: 

app:showAsAction="ifRoom" 




There are other attributes 
-for Controlling an action s 
appearance, but these are 
the most Common ones. 


Our menu resource file is now complete. The next thing we need to do is 
implement the onCreateOpt ions Menu () method in our activity. 
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3 . Add the menu to the app bar with 
the onCreateOptionsMenu!) method 

Once you’ve created the menu resource file, you add the actions 
it contains to an activity’s app bar by implementing the activity’s 
onCreateOptionsMenu () method. This method runs when the 
app bar’s menu gets created. It takes one parameter, a Menu object 
that’s a Java representation of the menu resource file. 

Here’s our onCreateOptionsMenu () method for MainActivity.java 
(update your code to reflect our changes): 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__ 


package com.hfad.bitsandpizzas; 

import android. view. Menu; ^ The onOrea-teOpiionsMenuO 

meihod uses -the Menu dass. 


□ 

BitsAndPizzas 

4H 

app/sre/main 

na 


public class MainActivity extends AppCompatActivity { 


Implementing this method adds any items in 
the menu resouvde tile to the app bar- 


@Override 

public boolean onCreateOptionsMenu(Menu menu) { 

// Inflate the menu; this adds items to the app bar. 
getMenuInflater().inflate(R.menu.menujnain, menu); 
return super.onCreateOptionsMenu(menu); 


java_ 

com.hfad.bitsandpizzas 



MainActivity.java 


} 


} 




All onCveateOptionsMenuO 

methods generally look like this. 


The line: 


getMenuInflater().inflate(R.menu.menu_main, menu); 

* 

This is -the menu resource -file. 


^ N This is a Menu object “thats 


a Java vepveseivta'licm ©I -the 
menu vesouvde -file- 


inflates your menu resource file. This means that it creates a Menu object 
that’s a Java representation of your menu resource file, and any actions 
the menu resource file contains are translated to Menul terns. These are 
then added to the app bar. 

There’s one more thing we need to do: get our action to start 
OrderActivity when it’s clicked. We’ll do that on the next page. 
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onOptionsItemSelectedQ 


4. React to action item clicks with 
the onOptionsItemSelectedO method 

To make your activity react when an action in the app bar is 
clicked, you implement the onOptionsItemSelected () 
method in your activity: 

@Override 


Basic app bar 
Toolbar 
Action 
Up button 
Share action 


The Menulter* object is -the action 

ibe app bar that was clicked. 



public boolean onOptionsItemSelected(Menultem item) { 


switch (item.getltemld()) { 

—■— £jet -the action s IP- 


} 


default: 

return super.onOptionsItemSelected(item); 


The onOptionsItemSelected () method runs whenever an 
action gets clicked. It takes one parameter, a Menultem object 
that represents the action on the app bar that was clicked. You 
can use the Menu I tern’s getltemld () method to get the ID 
of the action so that you can perform an appropriate action, such 
as starting a new activity. 

We want to start Order Activity when our action is clicked. 
Here’s the code for the onOptionsItemSelected () method 
that will do this: 


©Override 

public boolean onOptionsItemSelected(Menultem item) { 
switch (item.getltemld()) { 

case R.id.action_create_order: 

//Code to run when the Create Order item is clicked 

Intent intent = new Intent(this, OrderActivity.class); 
startActivity(intent); 

return true; ^ feue fells /Mroid you've dealt wife fee item bemj disked 

default: 

return super.onOptionsItemSelected(item); 


This intent ,s 
used to start 
OvdevA^tivity when 
the Cveate Ovdev 
action is disked- 


} 

The full code for MainActivity.java is on the next page. 
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The full MainActivity.java code 

Here’s the full code for MainActivity.java. Update your code so that it 
matches ours. We’ve highlighted our changes. 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 


__ 


package com.hfad.bitsandpizzas; 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 
import android.view.Menu; _ 

4. , . , „ T . , I hese classes are used by the 

import android.view.Menultem;\ . , .. 7 , 

. . . , . . _ , . \ oM^ptiomsIiemSelectedO method 

import android.content. Intent; ) . , . 

U so we need to import them. 

public class MainActivity extends AppCompatActivity { 


□ 

BitsAndPizzas 

4H 

app/sre/main 

HH 


java_ 

com.hfad.bitsandpizzas 



MainActivity.java 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar(toolbar); 

} 


QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 

getMenuInflater().inflate(R.menu.menu_main, menu); 
return super.onCreateOptionsMenu(menu); 


^This method gets called when an 
action on the ayp bar is clicked 


@Override 

public boolean onOptionsItemSelected(Menultem item) { 
switch (item.getltemld()) { 

case R.id.action_create_order: 

Intent intent = new Intent(this, OrderActivity.class); 
startActivity(intent); 
return true; 
default: 

return super.onOptionsItemSelected(item); 


} 


} 


Let’s see what happens when we run the app. 
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test drive 



Test drive the app 

When you run the app, a new Create Order action is displayed 
in the MainActivity app bar. When you click on the action 
item, it starts OrderActivity. 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


N 

* A Q 15:20 

, 

Bits and Pizzas 

+ 



Ah 


Hello World! 

/ 



ttevVs *tbc Create 



Order attio*. 

b _ 


N 

* 'A Q 15:21 ^ 

Create Order 



Ay 

Clicking on ihe Create Order 
action S”fca\rfcs Order^C; iiv'riy. 
Tkc u Cv-catc Order 1 yb 
displayed \n -the app bar. 



Put how do we get back to MainActivity? 

To return to MainActivity from OrderActivity, we 
currently need to click on the Back button on our device. But 
what if we want to get back to it from the app bar? 

One option would be to add an action to Order Activity’s 
app bar that starts MainActivity, but there’s a better way. 
We can get OrderActivity to return to MainActivity 
by enabling the Up button on OrderActivity’s app bar. 
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Enable Up navigation 

If you have an app that contains a hierarchy of activities, you 
can enable the Up button on the app bar to let users navigate 
through the app using hierarchical relationships. As an example, 
MainActivity in our app includes an action on its app bar that 
starts a second activity, OrderActivity. If we enable the Up 
button on OrderActivity’s app bar, the user will be able to 
return to MainActivity by clicking on this button. 


This is tine 
Up button- 

\ 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 





f ^ Q 15:23 1 

Create Order 



N 

Bits and Pizzas 

♦ ji Q 15:23 S 

+ S 

Hello World! 





T 


A Q 15:23 


Clidk o* ike Create Order 
adi'.o»> to 90 to OvdevAdiiviiy. 



Create Order 

N 

▼ A Q 15:23 1 


Bits and Pizzas 

+ 


Up navigation may sound the same as using the Back button on the 
device, but it’s different. The Back button allows users to work their 
way back through the history of activities they’ve been to. The Up 
button, on the other hand, is purely based on the app’s hierarchical 
structure. If your app contains a lot of activities, implementing the 
Up button gives your users a quick and easy way to return to an 
activity’s parent without having to keep pressing the Back button. 


The parent d^fcivi-fcy 




Bits and Pizzas 


^ Q 15:23 

+ 


The Child activity 

Clicking on the Child's 
Up button will take you ^ 
up the hierarchy to the 
activity's parent- 



N 

f ^ Q 15:23 ^ 

<- Create Order 




...to 50 to /klainActivity- 



Use the Back button 
to navigate back to 
tbe previous activity. 

Use tbe Up button to 
navigate up tbe app’s 
bierareby. 


We’re going to enable the Up button on OrderActivity’s app 
bar. When you click on it, it will display MainActivity. 
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responsible parenting 


Set an activity's parent 

The Up button enables the user to navigate up a hierarchy of activities 
in the app. You declare this hierarchy in AndroidManifest.xml by 
specifying the parent of each activity. As an example, we want the user 
to be able to navigate from OrderActivity to MainActivity 
when they press the Up button, so this means that MainActivity is 
the parent of OrderActivity. 

For API level 16 and above, you specify the parent activity using the 
android: parentActivityName attribute. For older versions of 
Android, you need to include a <meta-data> element that includes 
the name of the parent activity. Here are both approaches in our 
AndroidManifest. xml : 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.hfad.bitsandpizzas"> 


□ 


BitsAndPizzas 


hm 


app/src/main 

l</*mil 

AndroidManifest.xml 


Application 

android:allowBackup="true" 
android:icon="Qmipmap/ic_launcher M 
android:roundIcon="@mipmap/ic_launcher_round 
android:label="@string/app_name" 
android:supportsRtl="true" 
android:theme="@style/AppTheme"> 

<activity android:name=".MainActivity"> 

<intent-filter> 

<action android:name="android.intent.action.MAIN" /> 

<category android:name="android.intent.category.LAUNCHER" /> 

</intent-filter> 

</activity> 

Activity 

android:name=" .OrderActivity" ^ ^ , £Ve | |t ^ aUve use + 

android: label="@string/create_order" ^ ^ Ov-derAttivity's 

android:parentActivityName=" .MainActivity"> V ^ |S MainAttivity- 
<meta-data 

android:name="android.support.PARENT_ACTIVITY" 

android: value= M .MainActivity" /> K. \/ i , « , 

^ You only need bo add <rtie ta-data> 

element i-P you're supporting apps below API 

leve lb. Wc ve only included it so you can see 

'what rt looks like, but including it in your 

</manifest> Code won't do any har*«. 


</activity> 
</application> 


Finally, we need to enable the Up button in OrderActivity. 
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Adding the Up button 

You enable the Up button from within your activity code. 

You first get a reference to the app bar using the activity’s 
getSupportActionBar () method. This returns an 
object of type ActionBar. You then call the ActionBar 
setDisplayHomeAsUpEnabled () method, passing it a 
value of true. 

ActionBar actionBar = getSupportActionBar() ; 
actionBar.setDisplayHomeAsUpEnabled(true); 

We want to enable the Up button in OrderActivity, so we’ll 
add the above code to the onCreate () method in OrderActivity. 
java. Here’s our full activity code: 

package com.hfad.bitsandpizzas; 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 




Watch it! 


If you enable the 
Up button for an 
activity, you 
MUST specify its 
parent. 


If you don’t, you’ll get a null pointer 
exception when you call the 
setDisplayHomeAsUpEnabledO 
method. 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android. support. v7 . widget. Toolbar; yfc'v* us'mj "the Afrt'ionBav tlass, so we need to iwfort 
import android, support .v7 . app .ActionBar; " |t domes -from "the AppCompat Supper , gray') 


public class OrderActivity extends AppCompatActivity { 


a 


BitsAndPizzas 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_order); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 

setSupportActionBar (toolbar) ; ^-y^ u need *to use 

ActionBar actionBar = getSupportActionBar(); 
actionBar.setDisplayHomeAsUpEnabled(true); 

} 'V 

This enables -the Up bu-bton. Eve* -though v/eVe using a -toolbar -for 


4H 

app/src/main 

4Z3 


java 




com.hfad.bitsandpizzas 

L @ 

OrderActivity.java 

as weVe usinj -the toolbay 
•fyom the Suppoyt Libyayy- 


owy app bay, we heed -to use -the AtiiohBay elass toy -this method 


That’s all the changes we need to make to enable the Up button. 
Let’s see what happens when we run the app. 
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another test drive 



Test drive the app 

When you run your app and click on the Create Order action 
item, Order Activity is displayed as before. 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


Order Activity displays an Up button in its app bar. When 
you click on the Up button, it displays its hierarchical parent 
MainActivity. 



more sophisticated actions using action providers. 
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Sharing content on the app bar 

The next thing we’ll look at is how to add an action provider to 
your app bar. An action provider is an action that defines its own 
appearance and behavior. 

We’re going to concentrate on using the share action provider, 
which allows users to share content in your app with other apps 
such as Gmail. As an example, you could use it to let users send 
details of a particular pizza to one of their contacts. 

The share action provider defines its own icon, so you don’t have 
to add it yourself. When you click on it, it provides you with a list 
of apps you can use to share content. It adds a separate icon for the 
most commonly used app you choose to share content with. 

You share the content with an intent 

To get the share action provider to share content, you pass it an 
intent that defines the content you want to share, and its type. As an 
example, if you define an intent that passes text with an ACTION_ 
SEND action, the share action will offer you a list of apps on your 
device that are capable of sharing text. 

Here’s how the share action works (you’ll see this in action over the 
next two pages): 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 




This is whai -the shave adW looks 
like o« the afT bav. When you dlidk 
on iti it yves you a list o-f 3ffs 
that YOU dan use to shave dontent- 

) 


q 15:39 


+ c< 

<? r Keep 
Bluetooth 



Android Beam 


The shave 
- action also 
displays a» 
idon -rov -the 
app you mos-t 
dommohly shave 
dorrterri w'rth, 
in "this ease 
■the Messenger 
app. This may 
no-t be visible 
ai -Piv-s-t. 


o 


Your activity creates an intent and passes it to the share action provider. 

The intent describes the content that needs to be shared, its type, and an action. 



YourActivity 



Provider 


© 


When the user clicks on the share action, the share action uses the intent 
to present the user with a list of apps that can deal with the intent. 

The user chooses an app, and the share action provider passes the intent to the app’s activity 
that can handle it. 



Intent 


ShareAction 

Provider 



ACTION_SEND 
type: "text/plain" 
messageText: "Hi! 


AppActivity 
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add action provider 


Add a share action provider to menu_main.xml 

You add a share action to the app bar by including it in the menu 
resource file. 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


To start, add a new action_share String to strings.xml. We’ll use 
this String to add a title to the share action in case it appears in the 
overflow: 

<string name="action_share">Share</string> 

You add the share action to the menu resource file using the 
<item> element as before. This time, however, you need to specify 
that you’re using a share action provider. You do this by adding 
an attribute of app : actionProviderClass and setting it to 
android.support.v7.widget.ShareActionProvider. 

Here’s the code to add the share action; update your copy of 
menu_main.xml to match ours: 


□ 

BitsAndPizzas 

Hn 

app/src/main 

HU 



values 



strings.xml 


<?xml version="l.0" encoding="utf-8"?> 

<menu xmlns:android="http://schemas.android.com/apk/res/android" 


xmlns:app="http://schemas.android.com/apk/res-auto"> 


□ 


BitsAndPizzas 


<item android:id="@+id/action_create_order" 

android:title="@string/create_order_title" 
android:icon="@drawable/ic_add_white_ 24 dp" 
android:orderInCategory=" 1 " 
app:showAsAction="ifRoom" /> 


HB 

app/src/main 

4B 

res 



<item android:id="@+id/action_share" menu_main.xml 

android:title="@string/action_share" 

android: orderInCategory=" 2" pisplay the share action provider 

app: showAsAction="ifRoom" _• in the bar it there s room- 

app:actionProviderClass="android.support.v7.widget.ShareActionProvider" /> 


</menu> 

As we mentioned earlier, when you add a share action to your menu 
resource file, there’s no need to include an icon. The share action 
provider already defines one. 


* 

This is -the shave adtio* provider 
dass. It domes -Pvom the 

AppCompat Support Library. 


Now that we’ve added the share action to the app bar, let’s specify 
what content to share. 
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Specify the content with an intent 

To get the share action to share content when it’s clicked, you need 
to tell it what to share in your activity code. You do this by passing 
the share action provider an intent using its setSharelntent () 
method. Here’s how you’d get the share action to share some default 
text when it’s clicked: 


support libraries and app bars 

Basic app bar 
Toolbar 
Action 
Up button 
Share action 




package com.hfad.bitsandpizzas; 


VVcVc us m 3 these e*tra 
classes, so v/e need to 
import them. 

t 

import android.support.v7.widget.ShareActionProvider; 
import android.support.v4.view.MenultemCompat; 

public class MainActivity extends AppCompatActivity { 


□ 


BitsAndPizzas 


HU 

app/src/main 

MB 


java 


La 


com.hfad.bitsandpizzas 

1or 


MainActivity.java 


private ShareActionProvider ShareActionProvider; 

Add a ShaveAAionP'rovidev private variable- 

@Override 

public boolean onCreateOptionsMenu(Menu menu) { 

getMenuInflater().inflate(R.menu.menu_main, menu); 

Menul tern menul tern = menu. findl tern (R. id. action_share) ; 

ShareActionProvider = 

(ShareActionProvider) MenultemCompat.getActionProvider(menultern); 
setShareActionlntent("Want to join me for pizza?"); 

return super.onCreateOptionsMenu(menu); 


private void setShareActionlntent(String text) { 

Intent intent = new Intent(Intent.ACTION_SEND); 
intent.setType("text/plain"); 
intent.putExtra(Intent.EXTRA_TEXT , text); 
ShareActionProvider.setSharelntent(intent) 


a re-Perer^e -to the share 
a^tioh provider and assign it 
to the private variable- The* 
£all the setShareA^tionfntentO 
method- 


We treated the setShareA^tionlntentO 
method- It treates an intent, and 
passes it to the share adtion provider 
using its set£hare|ntentO method- 


You need to call the share action provider’s setSharelntent () 
method whenever the content you wish to share has changed. As an 
example, if you’re flicking through images in a photo app, you need to 
make sure you share the current photo. 

We’ll show you our full activity code on the next page, and then we’ll 
see what happens when the app runs. 
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MainActivity code 

The full MainActivityJava code 

Here’s the full activity code for MainActivity.java. Update your code to 
reflect ours. 

package com.hfad.bitsandpizzas; 



Basic app bar 
Toolbar 
Action 
Up button 
Share action 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 
import android.view.Menu; 
import android.view.Menultem; 
import android.content.Intent; 

import android.support.v7.widget.ShareActionProviderTN 

import android, support. v4 .view. -- us*m^ these e%tva diasses, 

so we need to imfovt the**- 

public class MainActivity extends AppCompatActivity { 


private ShareActionProvider shareActionProvider; 


□ 


Bits And Pizzas 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar(toolbar); 

} 


Km 

app/src/main 


4U 


java 




com. hfad. bitsand pizzas 

i— 

MainActivity.java 

QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 

getMenuInflater().inflate(R.menu.menu_main, menu); 

Menultem menultem = menu. findltern (R. id. action_share) ; 
shareActionProvider = 

(ShareActionProvider) MenuItemCompat.getActionProvider(menultem); 
setShareActionlntent("Want to join me for pizza?") ; —f"^j s )S de-Pault 


return super.onCreateOptionsMenu(menu); 


} 


kxt -that the shave 
adtioh should shave- 


The dode dontinues on the ne*t "^3 
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support libraries and app bars 


The MainActiviiy.java code (continued) 


□ 

Pizz 


BitsAndPizzas 


private void setShareActionlntent(String text) { 

Intent intent = new Intent(Intent.ACTION_SEND); 
intent.setType("text/plain"); 
intent.putExtra(Intent.EXTRA_TEXT , text); 
shareActionProvider.setSharelntent(intent); 

» T 

This seis the detawlt te*t 
@Override m the shave ttW pvovidev. 

public boolean onOptionsItemSelected(Menultem item) { 
switch (item.getltemld()) { 

case R.id.action_create_order: 

//Code to run when the Create Order item is clicked 
Intent intent = new Intent(this, OrderActivity.class); 
startActivity(intent); 
return true; 
default: 

return super.onOptionsItemSelected(item); 


app/src/main 

java_ 

com.hfad.bitsandpizzas 

L g 

MainActivity.java 


} 


} 


On the next page we’ll check what happens when the 
code runs by taking the app for a test drive. 
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yet another test drive 


Test drive the app 


When you run the app, the share action is displayed in the app 
bar: 


v 

-►y 


Basic app bar 
Toolbar 
Action 
Up button 
Share action 



The share ad-tion provider also 
added ihe Messenger idon -to our 
app bar. We usually share this app's 
dontent with the Messenger app, so 
the share adtion gave us a shortdut- 


When you click on the share action, it gives you a list of apps 
to choose from that can accept the intent you want to share: 



The intent we 
passed to the 
shave action 
pvovidev says 
we want to 
shave text usin$ 

ACTIONJSEI0- 

It displays a list 
o( apps that tan 
do this. 


When you choose an app to share content with, the app gets 
launched and the default text is shared with it: 




When you thoose an app, 
it shaves the de-fault text- 
We those the M essengev 
app on ouv devite, so it s 
used the text as the 
body o-f a message. 


+ Want to join me for pizza? 
> I'm I 


The 


> 

SMS 
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support libraries and app bars 


Your Android Toolbox 

You’ve got Chapter 8 under 
your belt and now you’ve 
added Android Support 
Libraries and app bars to your 
toolbox. 



BULLET POINTS 

■ You add a basic app bar by applying a theme 
that contains one. 

■ The Android Support Libraries provide 
backward compatibility with older versions of 
Android. 

■ The AppCompatActivity class 
is a type of activity that resides in the 
v7 AppCompat Support Library. In 
general, your activity needs to extend the 
AppCompatActivity class whenever 
you want an app bar that provides backward 
compatibility with older versions of Android. 

■ The android: theme attribute in 
AndroidManifest.xml specifies which theme 
to apply. 

■ You define styles in a style resource file 
using the <style> element. The name 
attribute gives the style a name. The 
parent attribute specifies where the style 
should inherit its properties from. 

■ The latest app bar features are in the 
Toolbar class in the v7 AppCompat 
Support Library. You can use a toolbar as 
your app bar. 



You ta»\ download 
i he -full toAt -fov 
i he thaptev- hom 
Wtbps 1 // ■fcjnyuvlton'/ 

HeadPivstAndvoid- 


Add actions to your app bar by adding them 
to a menu resource file. 

Add the items in the menu resource file to 
the app bar by implementing the activity’s 

onCreateOptionsMenu () method. 

You determine what items should do when 
clicked by implementing the activity’s 

onOptionsItemSelected() 

method. 

Add an Up button to your app bar to navigate 
up the app’s hierarchy. Specify the hierarchy in 
AndroidManifestxml. Use the ActionBar 
setDisplayHomeAsUpEnabled() 
method to enable the Up button. 

You can share content by adding the share 
action provider to your app bar. Add it by 
including it in your menu resource file. Call 
its setSharelntent () method to pass 
it an intent describing the content you wish 
to share. 
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9 fcigments 


^ Make It Modular ^ 



You’ve seen how to create apps that work in the same way no 
matter what device they’re running on. 

But what if you want your app to look and behave differently depending on whether 
it’s running on a phone or a tablet ? In this case you need fragments, modular code 
components that can be reused by different activities. We’ll show you how to create 
basic fragments and list fragments, how to add them to your activities, and how to 
get your fragments and activities to communicate with one another. 


this is a new chapter 
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different screen sizes 


Your app needs to look great on ALL devices 

One of the great things about Android development is that you 
can put the exact same app on devices with completely different 
screen sizes and processors, and have them run in exactly the 
same way. But that doesn’t mean that they always have to look 
exactly the same. 


On a phone; 



N 

▼ A Q 15:46 ■ 

on 

Workout 

HI 


a phone. It displays a list of workouts, 

The Limb Loosener 

U 

* It Q 15:47 

and when you click on one, you are 
shown the details of that workout. 

Core Agony 

Workout 



Click oy \ a* item ^ list) and r ^ 

it launches a second activity- 


The Wimp Special - 
Strength and Length 



. The Wimp Special 

5 Pull-ups 
10 Push-ups 
15 Squats 


On a tablet: 

On a larger device, 
like a tablet, you 
have a lot more 
screen space 
available, so it 
would be good if 
all the information 
appeared on the 
same screen. On 
the tablet, the list of 
workouts only goes 
partway across the 
screen, and when 
you click on an item, 
the details appear on 
the right. 


Qfl 


▼ Q 15:52 1 

Workout 

Thp 1 imh 1 nncpnpr 

The Limb Loosener 


1 IIC 1_II 1 1U LUUoCl Icl 

5 Handstand push-ups 


Core Agony 

10 1-legged squats 

15 Pull-ups 


The Wimp Special 

T 


Strength and Length 

TbevVs a lot more space oh 
a tablet so we can use tbe 
space *m a di-C-Cerent way- 


□ 

O 

V 

1 


To make the phone and tablet user interfaces look different from 
each other, you can use separate layouts for large devices and 
small devices. 
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fragments 


Your app may need to behave differently too 


It’s not enough to simply have different layouts for different devices. 
You also need different Java code to run alongside the layouts so that 
the app can behave differently depending on the device. In our 
Workout app, for instance, we need to provide one activity for 
tablets, and two activities for phones. 


On a phone: 


ttcv-c we have *two ^ 
activities: <>Y\t -for 
the list and one (or 
the details. 


N 

T A Q 15:46 1 

Workout 



The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


N 

IT X A Q 15:47 1 

Workout 



The Wimp Special 

5 Pull-ups 
10 Push-ups 
15 Squats 


On a tablet: 


□ • £ * Q 15:52 


Workout 



Put that means you might duplicate code 

The second activity that runs only on phones will need to insert the 
details of a workout into the layout. But that code will also need to 
be available in the main activity for when the app is running on a 
tablet. The same code needs to be run by multiple activities. 

Rather than duplicate the code in the two activities, we can use 
fragments. So what’s a fragment? 
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fragments 


Fragments allow you to reuse code 

Fragments are like reusable components or subactivities. A 
fragment is used to control part of a screen, and can be reused 
between screens. This means we can create a fragment for the 
list of workouts, and a fragment to display the details of a single 
workout. These fragments can then be shared between layouts. 


N 

* A Q 14:32 I 

Workout 



The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


l-f we use a 
' -fragment -for the 
list o-f workouts, 
we can reuse it m 
mu I tipi e activities. 
/ 


I/Ve can use 
a separate 

-fragment -for 
the workout 
details.. 


y 9 


Core Agony 

100 Pull-ups 
100 Push-ups 
100 Sit-ups 
100 Squats 



The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


vs 


Core Agony 

100 Pull-ups 
100 Push-ups 
100 Sit-ups 
100 Squats 


A fragment has a layout 

Just like an activity, a fragment has an associated layout. If you 
design it carefully, the fragment’s Java code can be used to control 
everything within the interface. If the fragment code contains all 
that you need to control its layout, it greatly increases the chances 
that you’ll be able to reuse it elsewhere in the app. 

We’re going to show you how to create and use fragments by 
building the Workout app. 
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The phone version of the app 

We’re going to build the phone version of the app in this 
chapter, and reuse the fragments we create to build the tablet 
version of the app in Chapter 10. Here’s how the phone version 
of the app will work: 


o 


When the app gets launched, it starts MainActivity. 

MainActivity uses activity_main.xml for its layout, and contains 
a fragment called WorkoutListFragment. 


fragments 

o 


Don’t worry 
if the app 
structure 
looks 
complex. 

We’ll work through it step by 
step over the course of this 
chapter. 



o 

© 


WorkoutListFragment displays a list of workouts. 

When the user clicks on one of the workouts. Detail Activity starts. 

DetailActivity uses activity_detail.xml for its layout, and contains a fragment 
called WorkoutDetailFragment. 


O 

o 


WorkoutDetailFragment uses fragment_workout_detail.xml for 
its layout. 

It displays the details of the workout the user has selected. 

WorkoutListFragment and WorkoutDetailFragment get their 
workout data from Workout.java. 

Workout.java contains an array of Workouts. 



Phone 



Were not $oin$ to WorkoutList 
use a layout -for Fragment .java 

WorkoutListFray^ent- 
You II see why later on. 


WorkoutDetail 

Fragment.java 


Workout.java 



fragment_ 

workout_detail.xml 


We’ll go through the steps for creating this app on the next page. 
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steps 


Here's what we're going to do 

There are three main steps we’ll go through to build the app: 


Create WorkoutDetailFragment. 

Workout Detail Fragment displays the details 
of a specific workout. We’ll start by creating two 
activities, MainActivity and DetailActivity, 
and then we’ll add WorkoutDetailFragment to 
DetailActivity. We’ll also get MainActivity 
to launch DetailActivity when a button is pressed. 
We’ll also add a plain old Java class, Workout.java , that 
will provide the data for WorkoutDetailFragment. 


N 

* U 15:06 ^ 

Workout 


Core Agony 


100 Pull-ups 

100 Push-ups 

100 Sit-ups 

100 Squats 



Create WorkoutListFragment. 

WorkoutListFragment displays a 
list of workouts. We’ll add this fragment 
to MainActivity. 


N 

Workout 

W 'J U 15:05 

The Limb Loosener 

Core Agony 


The Wimp Special 



Coordinate the fragments to 
display the correct workout. 

When the user clicks on an item in 
WorkoutListFragment, we’ll 
start DetailActivity and get 
WorkoutDetailFragment to 
display details of the workout the user 
selected. 


Strength and Length 


N 

V jtl U 15:05 1 

Workout 




The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 



Core Agony 

100 Pull-ups 
100 Push-ups 
100 Sit-ups 
100 Squats 


Let’s get started. 
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Create the project and activities 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


We’re going to start by creating a project that contains two activities, 
MainActivity and DetailActivity. MainActivity will be used for 
the fragment that displays a list of workouts, and DetailActivity will be 
used for the fragment that displays details of one particular workout. 

To do this, first create a new Android project with an empty activity for an 
application named “Workout” with a company domain of “hfad.com”, 
making the package name com. hf ad . workout. The minimum SDK 
should be API 19 so that it works on most devices. Name the activity 
“MainActivity” and name the layout “activity_main”. Make sure you check 
the Backwards Compatibility (AppCompat) checkbox. 



activity_main.xml activity_detail.xml 




MainActivity.java Detail Activity .java 


Next, create a second empty activity by highlighting the com.hfad.workout 
package in the app/src/main /java folder, and going to File—►New...—* Activity—> 
Empty Activity. Name the activity “DetailActivity”, name the layout “activity_ 
detail”, make sure the package name is com. hf ad. workout, and check 
the Backwards Compatibility (AppCompat) checkbox. 

Add the AppCompat Support library 


|t pvomfted tor -the 
activity’* sowrte lanjua^e, 
seledt the option tor Java- 


We’re going to be using activities and fragments from the v7 AppCompat Library, 
which means you need to make sure the library has been added to your project as a 
dependency. To do this, go to the File menu and choose Project Structure. Then click 
on the app module and choose Dependencies. 



This is -the v7 AppCompa't 

Suffov-t Library. 


If Android Studio has already added the v7 AppCompat Support Library to your 
project, you’ll see it listed in the list of dependencies. If it’s not there, you’ll need to 
add it yourself. To do this, click on the “+” button at the bottom or right side of the 
screen. When prompted, choose the Library Dependency option, then select the 


appcompat-v7 library from the list of options. Finally, use the OK buttons to save 
your changes. 

Once you’ve made sure the v7 AppCompat Support Library has been added, you can 
close the Project Structure window. On the next page we’ll update MainActivity. 
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layout code 

Add a button to MainActivity's layout 



WorkoutDetailFragment 
WorkoutList Frag merit 
Coordinate fragments 


We’re going to add a button to MainActivity that will start 
DetailActivity. This is because we’re going to work on the 
fragment for DetailActivity first, and adding a button to 
MainActivity will give us an easy way of navigating from 
MainActivity to DetailActivity. 

We’ll start by adding the button to the layout. Open file activity_main. 
xml , then update your code so that it matches ours below: 

<?xml version="l.0" encoding="utf-8"?> 



<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 


□ 

Workout 


xmlns:tools="http://schemas.android.com/tools 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:padding="16dp" 
android:orientation="vertical" 

tools:context="com.hfad.workout.MainActivity"> 

This is Ihe button we've adding 

The button Calls -the 
onShowDeiailsO method in 
MainA^iiviiy when its disked- 


HU 

app/sre/main 

Lfii 


res 


<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:onClick="onShowDetails" ^ We need -to wv-iie -this method- 
android:text="@string/details_button" /> 


MU 

layout 


]</ *mll 

activity_main.xml 


</LinearLayout> 


The button uses a String resource for its text, so we need to add it to 
the String resource file. Open file strings.xml, then add the following 
String resource: 


<resources> 


This -text will be 
displayed on “the button- 

<string name="details_button">Show details</string> 


</resources> 


When the button is clicked, we’ve specified that MainActivity’s 
onShowDetails () method should be called. We’ll write the code 
for this method next. 


□ 

Workout 

H3 

app/sre/main 

res 



strings.xml 
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Make the button respond to clicks 

We need to get MainActivity’s button to start 
DetailActivity when it’s clicked. To do this, we’ll add 
a method called onShowDetails () to MainActivity. 
The method will start DetailActivity using an intent, 
just as we’ve done in previous chapters. 

Here’s the full code for MainActivity.java. Update your code so 
that it matches ours. 

package com.hfad.workout; 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 

The activity extends 

import android. content. Intent; AppCompd-fcA^tv'ty 

V 

public class MainActivity extends AppCompatActivity { 


fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


Intent 



□ 

Workout 

L C3 

app/sre/main 

java_ 

MB 

com. hfad .workout 

U 


{ 


@Override 

protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

} --This method is called when the button IS 

fct dieted- It starts DetailMtWity- 
public void onShowDetails (View view) { 

Intent intent = new Intent(this, DetailActivity.class); 
startActivity(intent); 

} 


MainActivity.java 


That’s everything we need to get MainActivity to start 
DetailActivity. On the next page we’ll add a new 
fragment to our project called WorkoutDetailFragment 
that we’ll then add to DetailActivity. 
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add fragment 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


How to add a fragment to your project 


We’re going to add a new fragment called WorkoutDetailFragment 
to the project to display details of a single workout. You add a new 
fragment in a similar way to how you add a new activity: by switching to 
the Project view of Android Studio’s explorer, highlighting the com.hfad. 
workout package in the app/src/main/java folder, going to the File menu, 
and choosing New...—^Fragment—^Fragment (Blank). 


You will be asked to choose options for your new fragment. Name the 
fragment “WorkoutDetailFragment”, check the option to create layout 
XML for it, and give the fragment layout a name of “fragment_workout_ 
detail”. Uncheck the options to include fragment factory methods and 
interface callbacks; these options generate extra code that you don’t need- 
to use. When you’re done, click on the Finish button. 


VVc surest looking at the extra toAt 

/Wvoid jenevates tov- you attev 
vow've finished -this book- Vow mi^ht 
find some ot it usetul depending on 
what you want to do. 



When you click on the Finish button, Android Studio creates your new 
fragment and adds it to the project. 
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What fragment code looks like 


When you create a fragment, Android Studio creates two files for you: Java 
code for the fragment itself, and XML code for the fragment’s layout. The Java 
code describes the fragment’s behavior, and the layout describes the fragment’s 
appearance. 

We’ll look at the Java code first. Go to the com.hfad.workout package in the app/ 
src/main/java folder and open the file WorkoutDetailFragment.java that Android 
Studio just created for us. Then replace the code that Android Studio generated 
with the code below: 


fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


package com. hf ad. workout; ^eVe usmg ±he Fragment dlass fVor* 

/Udv-oid Suppoiri Library. 

import android.support.v4.app.Fragment; 
import android.os.Bundle; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 


□ 

Workout 


MB 

app/src/main 


>-□ 


java 


MTJ 


com.hfad.workout 

u 


WorkoutDetail 

Fragment.java 


Workou-tPc-tailFrajmCh-t 
c'x.'tc^ds *tbc Fra^rwc^*t dlass 

public class WorkoutDetailFragment extends Fragment { 

This is -the onCrea-fcel/iewO meihod. li's dalled 
@Override ^ when Android needs -the -fragments layout 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_workout_detail, container, false); 

} 


} 


This -tells Android whidh layout the -fragment 
(in this ease, it's fragment_workout_detail). 


uses 


The above code creates a basic fragment. As you can see, the code for a 
fragment looks very similar to activity code. 

To create a fragment, you first need to extend the Fragment class or one of its 
subclasses. We’re using fragments from the Support Library, so our fragment 
needs to extend the android. support. v4 . app . Fragment class. This is 
because the Support Library fragments are backward compatible with earlier 
versions of Android, and contain the latest fragment features. 

The fragment implements the onCreateView () method, which gets called 
each time Android needs the fragment’s layout, and it’s where you say which 
layout the fragment uses. The onCreateView () method is optional, but as 
you need to implement it whenever you’re creating a fragment with a layout, 
you’ll need to implement it nearly every time you create a fragment. We’ll look 
at this method in more detail on the next page. 
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onCreateViewQ 


The fragment's onCreateViewO method 



WorkoutDetailFragment 
WorkoutList Frag merit 
Coordinate fragments 


The onCreateView () method returns a View object that 
represents the fragment’s user interface. It gets called when 
Android is ready to instantiate the user interface, and it takes three 
parameters: 

VC 

public View onCreateView(Layoutlnflater inflater. 


The onC\rea-te\/iewO method 
jets dal led when Android 
needs the -Prajment^s layout- 


ViewGroup container, 


Bundle savedlnstanceState) { 


} 


The first parameter isaLayoutlnflator that you can use to 
inflate the fragment’s layout. Inflating the layout turns your XML 
views into Java objects. 

The second parameter is a ViewGroup. This is the ViewGroup in 
the activity’s layout that will contain the fragment. 

The final parameter is a Bundle. This is used if you’ve previously 
saved the fragment’s state, and want to reinstate it. 

You specify the fragment’s layout using the Layoutlnf lator’s 
inflate () method: 

public View onCreateView(Layoutlnflater inflater, 

ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_workout_detail, 

container, inflates the 

false) ; layout -Pv-om 

} )</\/]L to Java objects- 

This is the fragment equivalent of calling an activity’s 
setContentView() method. You use it to say what layout 
the fragment should use, in this case R. layout. f ragment_ 
workout detail. 


Watch it! 


All fragments 
must have a 
public no¬ 
argument 
constructor. 


Android uses it to 
reinstantiate the fragment 
when needed, and if it’s not 
there, you’ll get a runtime 
exception. 

In practice, you only need 
to add a public no-argument 
constructor to your fragment 
code if you include another 
constructor with one or more 
arguments. This is because 
if a Java class contains 
no constructors, the Java 
compiler automatically 
adds a public no-argument 
constructor for you. 


The inflate () method’s container argument specifies the 
ViewGroup in the activity that the fragment’s layout needs to be 
inserted into. It gets passed to the fragment as the second parameter 
in the fragment’s onCreateView () method. 


Now that you’ve seen the fragment’s code, let’s have a look at its 
layout. 
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fragments 


Fragment layout code looks just like activity layout code 


□ 

Workout 

HU 

app/src/main 

HT3 


As we said earlier, fragments use layout files to describe their appearance. 

Fragment layout code looks just like activity layout code, so when you 
write your own fragment layout code, you can use any of the views and 
layouts you’ve already been using to write activity layout code. 

We’re going to update our layout code so that our fragment contains two 
text views, one for the workout title and one for the workout description. 

Open the file fragment_workout_detailxml in the app/src/res/layout folder, 
and replace its contents with the code below: 

<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 
android: layout_height="match_parent" uS ,^ a LmearLayoul tov 


CO 

La 

layout 


fragment_ 

workout_detail.xml 


android:layout_width="match_parent" 
android:orientation="vertical"> 


our -fragment, but we Could have 
used any o( the other layout 
types we’ve looked at instead- 


We II display 
the workout 
title and 
description in 
two separate 
Te*t\/iews. 


This makes the te*t large- 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:textAppearance="?android:attr/textAppearanceLarge 
android:text="@ string/workout_titie" 
android:id="@+id/textTitle" /> 



Static String resources. 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/workout_description 
android:id="@+id/textDescription" /> 
</LinearLayout> 


For now we’re using static String resources for the title and description 
of the workout so that we can see our fragment working. Open strings.xml, 
and add the following String resources: 

Well use these to display 
default text in our -fragment- 

<string name="workout_title">Title</string> 

<string name="workout_description">Description</string> 

</resources> 


<resources> 


a 

Workout 

app/src/main 

mi 


03 

values 


That’s everything we need for our fragment. On the next page we’ll look 
at how you add the fragment to an activity. 


strings.xml 
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add fragment to layout 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


Add a fragment to an activity's layout 


We’re going to add our WorkoutDetailFragment to DetailActivity 
so that the fragment gets displayed in the activity’s layout. To do this, we’re 
going to add a <f ragment> element to DetailActivity’s layout. 

The <f ragmen t> element is a view that specifies the name of the fragment 
you want to display. It looks like this: 


<fragment 

android:name="com.hfad.workout.WorkoutDetailFragment" 
android:layout_width="match_jparent" 
android:layout_height="match_j?arent" /> 


^U-^TIfis is the -full name 
of the -Cvajment tla ss - 


You specify the fragment using the android: name attribute and giving it 
a value of the fully qualified name of the fragment. In our case, we want to 
display a fragment called WorkoutDetailFragment that’s in the com. 
hfad. workout package, so we use: 

android:name="com.hfad.workout.WorkoutDetailFragment" 

When Android creates the activity’s layout, it replaces the <f ragment> 
element with the View object returned by the fragment’s onCreateView () 
method. This view is the fragment’s user interface, so the <f ragment> 
element is really a placeholder for where the fragment’s layout should be 
inserted. 

You add the <f ragment> element to your layout in the same way that you 
add any other element. As an example, here’s how you’d add the fragment to 
a linear layout: 

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 

android:layout_width="match_parent" □ 

android:layout_height="match_parent"> Workout 




<fragment 


app/src/main 



android:name="com.hfad.workout.WorkoutDetailFragment" 
android:layout_width="match_j?arent" 
android:layout_height="match_parent" /> 


layout 



</LinearLayout> 


If your layout only contains a single fragment with no other views, however, 
you can simplify your layout code. 


activity_detail.xml 
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Simplify the layout 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


If the layout code for your activity comprises a single fragment 
contained within a layout element with no other views, you 
can simplify your layout code by removing the root layout 
element. 

Each layout file you create must have a single root element 
that’s either a view or view group. This means that if your 
layout contains multiple items, these items must be contained 
within a view group such as a linear layout. 

If your layout contains a single fragment, the <f ragmen t> 
element can be the layout file’s root. This is because the 
<f ragment> element is a type of view, and Android replaces 
it with the layout of the fragment at runtime. 

In our code example on the previous page, we showed you 
a fragment contained within a linear layout. As there are no 
other views in the layout, we can remove the linear layout so 
that our code looks like this: 


<?xml version="l.0” encoding= M utf-8 M ?> 


A layout lile requires 
a single view or view 
group as its root 
element. II your 
activity only contains 
a Iragment, the 
Iragment itself can 
he the root element. 

□ 

Workout 

43 


<fragment 

xmlns:android="http://schemas.android.com/apk/res/android" 


app/src/main 

'-m 


android:name="com.hfad.workout.WorkoutDetailFragment" 


android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" /> 


This code does exactly the same thing as the code on the 
previous page, but it’s much shorter. 




Vo* da* add your -fragment 
-to your layout like this i-f 
your layout OHU/ dohtai ks 
3 single -Pragmeht* 



activity_detail.xml 


That’s the only code we need for Detail Activity’s layout, 
so replace the code you have in your version of activity_detail.xml, 
with the code above and save your changes. 


On the next page we’ll look at the code for the activity itself. 
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AppCompatActivity extends FragmentActivity 

Support Library fragments need 
activities that extend FragmentActivity 

When you add a fragment to an activity, you usually need to write code 
that controls any interactions between the fragment and the activity. 
You’ll see examples of this later in the chapter. 

Currently, WorkoutDetailFragment only contains static data. 
DetailActivity only has to display the fragment, and doesn’t need 
to interact with it, so this means that we don’t need to write any extra 
activity code to control the interaction. 

There’s one important point to be aware of, however. When you’re 
using fragments from the Support Library, as we are here, you must 
make sure that any activity you want to use them with extends 
the FragmentActivity class, or one of its subclasses. The 

FragmentActivity class is designed to work with Support Library 
fragments, and if your activity doesn’t extend this class, your code will 
break. 

In practice, this isn’t a problem. This is because the 
AppCompatActivity class is a subclass of FragmentActivity, 
so as long as your activity extends the AppCompatActivity class, 
your Support Library fragments will work. 

Here’s the code for DetailActivity.java. Update your code so that it 
matches ours below: 



WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 



T 

/|S lo«5 as you*- activity extends 
FVaynentActivity, or one o+ i-b subclasses 
sutVi as AppCon>patMtwity, you can use 
•fra^menis -from tbe Support L'brary- 


package com.hfad.workout; 


□ 


Workout 

import android.support.v7.app.AppCompatActivity; HB 

import android, os. Bundle; t),i a.i. ., w ,. . . ,,, app/src/main 

^eta.l/\Ct.v.ty^xtends AppCompatActivity. LQ 

public class DetailActivity extends AppCompatActivity { 


java_ 

MU 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_detail); 

} 


com.hfad.workout 

L @ 

DetailActivity.java 


That’s everything we need to display the WorkoutDetailFragment 
in our activity. Let’s see what happens when we run the app. 
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What the code does 

Before we take the app for a test drive, let’s go through what 
happens when the code runs. 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


© 


When the app is launched, activity MainActivity gets created. 

The user clicks on the button in MainActivity to start DetailActivity. 



© 


Detail Activity's onCreate() method runs. 

The onCreate () method specifies that activity_detail.xml should be used for 
DetailActivity’s layout. 

onCreate() 


DetailActivity activity_detail.xml 




© 


© 


activity_detail.xml sees that it includes a <fragment> element that refers 



WorkoutDetailFragment's onCreateView() method is called. 

The onCreateView () method specifies that fragment_workout_detail.xml should be used for 
WorkoutDetailFragment’s layout. It inflates the layout to a View object. 



„ WovkoiA-tPe-tailPv-a^men-t's View 

object actually stains two 
-further views, the two te%t 
views \ y \ the -fra<y*cir\t s layout- 
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what happens, continued 


The story continues 



WorkoutDetailFragment 

WorkoutListFragment 
Coordinate fragments 


O 


activity_detail.xmls Views are inflated to View Java objects. 

DetailAct ivity layout uses Wor koutDetailFragment’s View object in place of the 
<f ragment> element in its layout’s XML. 



ad'tivi'ty_dic'tail %w'l only don-bains *bbe 
<-fv-a^cn-b> dement Tt,s means -tha-t 
when it's in-flated, it only ton-tains 
WorkoutDetailFra^ent s \/iew object- 


Finally, Detail Activity is displayed on the device. 

Its layout contains the fragment WorkoutDetailFragment. 

O'* WorkoutPetailFrag^ent is 
displayed in PetailMivity. /ou'll see 
this better in the test drive below. 

Emulator 

Test drive the app- 



When we run our app, MainActivity gets launched. 

When we click on MainActivity’s button, it starts 
DetailActivity. DetailActivity contains 
WorkoutDetailFragment, and we see this on the device. 


Clidk on *bbe 
butbon... 


N 


▼ A U 15:49 • 

Workout 


N ▼ i U 15:50 ^ 

^ _ 

Workout 



Title 



Description 1 

•and placeholder text 1 

•for the workout title and 1 


dcsd\rip-bion is displayed- 
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fragments 


BE f!^ I/lyoUf 

Your job is to play like you’re the layout 
and say whether each of these layouts is 
valid or invalid and why. Assume that 
any fragments or String 
resources referred to in the 
layout already exist. 



<?xml version="1.0" encoding="utf-8"?> 

<fragment 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.WorkoutDetai1Fragment" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 


<?xml version="1.0" encoding="utf-8"?> 

<fragment 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.WorkoutDetai1Fragment" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/details_button" /> 


<?xml version="l.0" encoding="utf-8"?> 

<Button 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/details_button" /> 
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solution 



BE L^uf §©]uf|©n 

Your job is to play like you’re the layout 
and say whether each of these layouts is 
valid or invalid and why. Assume that 
any fragments or String 
resources referred to in the 
layout already exist. 



3 "?> 


This layout is valid, as it 
Consists o-f a single -fragment- 


<?xml version="1.0" encoding="utf 
<fragment 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.WorkoutDetai1Fragment" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 


o 


<?xml version="1.0" encoding="utf-8"?> 

<fragment 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.WorkoutDetai1Fragment" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/details_button" /> 


This layout is invalid- A layout must 
have a single \/iew or \/iew£jroup as 
its root element- To make this layout 
valid, you would need to put the 
-fragment and Button in a V\ ew^jroup. 



<?xml version="1.0" encoding="utf-8"?> 

<Button 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/details_button" /> 


This layout is valid as it has a single V\ ew, 
in this ease a Button, as its root element- 
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fragments 


fret the fragment and activity to interact 

So far we’ve looked at how you add a basic fragment to an activity. 

The next thing we’ll look at is how you get the fragment and activity 
to interact. 

To do this, we’ll start by changing WorkoutDetailFragment so 
that it displays details of a workout instead of the placeholder text we 
have currently. 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


N 

i 11:39 1 

Workout 




The first thing we’ll do is update the fragment’s layout to remove the 
static text that’s currently displayed. Open file fragment_workout_detail.xml , 
then update the code to match our changes below: 

<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:textAppearance="?android:attr/textAppearanceLarge" 


android:id="0+id/textTitle" /> ^ 


CTextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content 

android:id="@+id/textDescription" /> 
</LinearLayout> 


Delete 

both 

these 

lines. 


/ 


□ 

Workout 


■ 

app/src/main 


HTJ 


co _ 

LQ 

layout 


On the next page we’ll add a new class to our project to hold the 
workout data. 


frag men t_ 
workout_detail.xml 
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add class 


The Workout class 

We’re going to hold our workout data in a file called Workout.java , 
which is a pure Java class file that the app will get workout data from. 
The class defines an array of four workouts, where each workout 
is composed of a name and description. Select the com.hfad.workout 
package in the app/src/main/java folder in your project, then go to 
File—>New...—Java Glass. When prompted, name the class “Workout”, 
and make sure the package name is com. hf ad. workout. Then replace 
the code in Workout.java with the following, and save your changes. 



WorkoutDetailFragment 
WorkoufList Frag merit 
Coordinate fragments 


package com.hfad.workout; 


public class Workout { 
private String name; 
private String description; 


Bach Workout has a ha^c a*d description 

workouts is a* array of -four Workouts- 




public static final Workout[] workouts = { 
new Workout("The Limb Loosener", 

"5 Handstand push-ups\nlO 1-legged squats\nl5 Pull-ups"), 
new Workout("Core Agony", 

"100 Pull-ups\nl00 Push-ups\nl00 Sit-ups\nl00 Squats"), 
new Workout("The Wimp Special", 

"5 Pull-ups\nlO Push-ups\nl5 Squats"), 
new Workout("Strength and Length", 

"500 meter run\n21 x 1.5 pood kettleball swing\n21 x pull-ups") 


}; 


} 


//Each Workout has a name and description 
private Workout(String name. String description) 
this.name = name; 
this.description = description; 

1 


{ 


a 

Workout 


public String getDescription() { 


return description; 


} 


public String getName() { 
return name; 

} 


t These are getters -for -the 
private variables- 


public String toStringO 
return this.name; 

1 




The S-brihJ representation 
of a Workout is its name- 


app/sre/main 

^3 

java_ 

1 a 

com.hfad.workout 



Workout.java 


The data will be used by the fragment to display details of a particular 
workout. We’ll look at this next. 
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Pass the workout IP to the fragment 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


When you have an activity that uses a fragment, the activity will usually 
need to talk to the fragment in some way. As an example, if you have 
a fragment that displays detail records, you need the activity to tell the 
fragment which record it needs to display details of. 

In our case, we need WorkoutDetailFragment to display details of 
a particular workout. To do this, we’ll add a simple setter method to the 
fragment that sets the value of the workout ID. The activity will then 
be able to use this method to set the workout ID. Later on, we’ll use the 
workout ID to update the fragment’s views. 

Here’s the revised code for WorkoutDetailFragment (update your 
code with our changes): 


package com.hfad.workout; 


□ 

Workout 


import android.support.v4.app.Fragment; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 


L C3 

app/src/main 

java_ 

Ma 

com. hfad. workout 


public class WorkoutDetailFragment extends Fragment { 

private long workoutld; ^^This \ s IP o£ “the workout “the user looses. 

Later, well use it to set the values o£ the 
@Override -frajmcivls views with the workout details. 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_workout_detail, container, false); 

} 



WorkoutDetail 

Fragment.java 


public void setWorkout(long id) { 
this.workoutld = id; 

} 


■ This is a setter method -for the workout 
ID- The activity will use this method to 
set the value o+ the workout ID- 


We need to get the DetailActivity to call the fragment’s 
setWorkout () method and pass it the ID of a particular workout. In 
order to do this, the activity must get a reference to the fragment. But 
how? 
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getSupportFragmentManagerQ 


Use the fragment manager 
to manage fragments 



WorkoutDetailFragment 
WorkoufList Frag merit 
Coordinate fragments 


Before an activity can talk to its fragment, the activity first needs 
to get a reference to the fragment. You get a reference to an 
activity’s fragments using the activity’s fragment manager. 
The fragment manager is used to keep track of and deal with any 
fragments used by the activity. 


There are two methods for getting a reference to the 
fragment manager, getFragmentManager () 
and getSupportFragmentManager (). The 
getSupportFragmentManager () method gets a reference 
to the fragment manager that deals with fragments from the 
Support Library like ours, and the getFragmentManager () 
method gets a reference to the fragment manager that deals with 
fragments that use the native Android fragment class instead. 
You then use the fragment manager’s f indFragmentByld () 
method to get a reference to the fragment. 


We’re using fragments from the Support Library, so we’re going 
to use the getSupportFragmentManager () method like 
this: 




TW»s is the IP 
■the atiiviiy's 


ot -the tv-a^ent m 
layout- 


getSupportFragmentManager().findFragmentByld(R.id.fragment id) 

We’re going to use DetailActivity’s fragment manager to L * j 'tT ^^ 7 ^ ^ 

get a reference to its WorkoutDetailFragment. In order to , m ^ you use it 

do this, we first need to assign an ID to the fragment. ^ a v-ajment- 


You assign an ID to an activity’s fragment in the activity’s 
layout. Open the file activity_detail.xml, then add an ID to the 
activity’s fragment by adding the line of code highlighted below: 


<?xml version="1.0" encoding="utf-8"?> 

<fragment xmlns:android="http://schemas.android.com/apk/res/android" 


android:name="com.hfad.workout.WorkoutDetailFragment" 

android:id="@+id/detail_frag" a* IP to the 

android:layout_width="match_parent" 6*9 mart- 
android:layout_height="match_parent" /> 


□ 

Workout 


4B 

app/sre/main 

HO 


The above code gives the fragment an ID of detail_f rag. 
On the next page we’ll use the ID to get a reference to the 
fragment. 



activity_detail.xml 
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fret the activity to set the workout IP 

To get a reference to the fragment, we need to add the 
following code: 

WorkoutDetailFragment frag = (WorkoutDetailFragment) 

getSupportFragmentManager().findFragmentByld(R.id.detail_frag); 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


We can then call the fragment’s setWorkout () method to 
tell the fragment which workout we want it to display details for. 
For now, we’ll hardcode which workout we want it to display so 
that we can see it working. Later on, we’ll change the code so 
that the user can select which workout she wants to see. 


Here’s our revised code for DetailActivity.java. Update your code 
to reflect our changes: 


package com.hfad.workout; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 


□ 

Workout 

4U 

app/src/main 

H3 


public class DetailActivity extends AppCompatActivity { 


java 


} 


@Override 

protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState) ; 


com. hfad .workout 



DetailActivity.java 


setContentView(R.layout.activity_detail); 

WorkoutDetailFragment frag = (WorkoutDetailFragment) 


getSupportFragmentManager().findFragmentByld(R.id.detail_frag); 

frag. setWorkout (1) ; *< __ o . 

V This c^ets us a to 

WeVe going k> get Wovkou-tPe-tailFv-agment to display 

details of a workout here to check that it's working. 


Wov-koutPetailFv-agroent- Its id in 
the activity's layout is detail_frag- 


As you can see, we’ve got a reference to the fragment after 
calling setContentView () . Getting the reference here is 
really important, because before this point, the fragment won’t 
have been created. 

The next thing we need to do is get the fragment to update its 
views when the fragment is displayed to the user. Before we can 
do this, we need to understand the fragment’s lifecycle so that 
we add our code to the correct method in the fragment. 
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activity revision 


Activity states revisited 


Just like an activity, a fragment has a number of key lifecycle methods that get 
called at particular times. It’s important to know what these methods do and 
when they get called so your fragment works in just the way you want. 

Fragments are contained within and controlled by activities, so the fragment 
lifecycle is closely linked to the activity lifecycle. Here’s a reminder of the 
different states an activity goes through, and on the next page we’ll show you 
how these relate to fragments. 


WorkoutDetailFragment 
WorkoufList Frag merit 
Coordinate fragments 


Activity created 





Activity started 




Activity resumed 




Activity paused 




Activity stopped 




Activity destroyed 



The activity is created when its 
onCreate() method runs. 

At this point, the activity is initialized, 
but isn’t visible. 


The activity is started when its 
onStart() method runs. 

The activity is visible, but doesn’t have 
the focus. 


The activity is resumed when its 
onResume() method runs. 

The activity is visible, and has the focus. 


The activity is paused when its 
onPause() method runs. 

The activity is still visible, but no longer 
has the focus. 


The activity is stopped when its 
onStopO method runs. 

The activity is no longer visible, but still 
exists. 


The activity is destroyed when 
its onDestroyO method runs. 

The activity no longer exists. 
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The fragment lifecycle 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


A fragment’s lifecycle is very similar to an activity’s, but it has a few 
extra steps. This is because it needs to interact with the lifecycle of 
the activity that contains it. Here are the fragment lifecycle methods, 
along with where they fit in with the different activity states. 


Activity states 

Fragment callbacks 

Activity created 

onAttach() 

i 


i 

onCreate() 


i 

onCreateView() 


i 

onActivityCreated() 

.1. 

Activity started 

I 

onStart() 

.i. 

Activity resumed 

I 

onResumeO 

.i. 

Activity paused 

I 

onPause() 

.i. 

Activity stopped 

i 

onStop() 

.i. 

Activity destroyed 

i 

onDestroyView() 

i 


i 

onDestroyO 


i 

onDetach() 


onAttach(Context) 

This happens when the fragment is associated with a 
context, in this case an activity. 

onCreate(Bundle) 

This is very similar to the activity’s onCreate () method. 

It can be used to do the initial setup of the fragment. 

onCreateView(LayoutInflater # ViewGroup, Bundle) 

Fragments use a layout inflater to create their view at this 
stage. 

onActivityCreated(Bundle) 

Galled when the onCreate () method of the activity 
has completed. 

onStart() 

Galled when the fragment is about to become visible. 

onResume() 

Galled when the fragment is visible and actively running. 

onPause() 

Galled when the fragment is no longer interacting with 
the user. 

onStopO 

Galled when the fragment is no longer visible to the user. 

onDestroyView() 

Gives the fragment the chance to clear away any 
resources that were associated with its view. 

onDestroyO 

In this method, the fragment can clear away any other 
resources it created. 

onDetach() 

Galled when the fragment finally loses contact with the 
activity. 


you are here ► 


365 










Fragment class 


Fragments inherit lifecycle methods 

As you saw earlier, our fragment extends the Android fragment 
class. This class gives our fragment access to the fragment lifecycle 
methods. Here’s a diagram showing the class hierarchy. 



WorkoutDetailFragment 
WorkoufList Frag merit 
Coordinate fragments 


Object 

5E — 

Fragment 

onAttach(Context) 

onCreate(Bundle) 

onCreateView(Layoutlnflater, 
ViewGroup, Bundle) 

onActivityCreated(Bundle) 

onStartO 

onResumeO 

onPauseO 

onStopO 

onDestroyView() 

onDestroyO 

onDetach() 

getView() 

_ t 

OurFragment 

onCreateView(Layoutlnflater, 
ViewGroup, Bundle) 

yourMethodO 


Object class 

(java.Iang.Object) 


Fragment class 

(android.support.v4.app.Fragment) 

The Fragment class implements default 
versions of the lifecycle methods. It also defines 
other methods that fragments need, such as 
getView(). 


OurFragment class 

(com.hfad.foo) 

Most of the behavior of our fragment is handled 
by superclass methods our fragment inherits. All 
you do is override the methods you need. 


Even though fragments have a lot in common with activities, the Fragment class 
doesn’t extend the Activity class. This means that some methods that are 
available to activities aren’t available to fragments. 

Note that the Fragment class doesn’t implement the Context class. Unlike an 
activity, a fragment isn’t a type of context and therefore doesn’t have direct access 
to global information about the application environment. Instead, fragments must 
access this information using the context of other objects such as its parent activity. 

Now that you understand the fragment’s lifecycle better, let’s get back to getting 
WorkoutDetailFragment to update its views. 
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fragments 


Set the view's values in the fragment's onStarti) method 


We need to get WorkoutDetailFragment to update its views with 
details of the workout. We need to do this when the activity becomes 
visible, so we’ll use the fragment’s onStart () method. Update your 
code to match ours: 

package com.hfad.workout; 

import android.support.v4.app.Fragment; 

import android.os.Bundle; 

import android.view.Layoutlnflater; 

import android.view.View; tVeVe using this dass in the 

import android, view.ViewGroup; . onStavtO method- 

import android.widget.TextView; 

public class WorkoutDetailFragment extends Fragment { 
private long workoutld; 


□ 

Workout 

HU 

app/src/main 

K3 


java 


mi 


com. hfad .workout 
L @ 

WorkoutDetail 
Frag merit, java 


QOverride 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_workout_detail, container, false); 

} 


public void onStart () { 9 e ^' ew ^ ( the -Pvagment's voot 

super .onStart () ; view. We £an the^ use this to get v-e-Peirendes to the 

View view = getView() ; ^—woirkout title 3nd description text views, 
if (view != null) { 

TextView title = (TextView) view.findViewByld(R.id.textTitle); 

Workout workout = Workout.workouts[(int) workoutld]; 
title.setText(workout.getName()); 

TextView description = (TextView) view.findViewByld(R.id.textDescription) 
description.setText(workout.getDescription()); 


} 


} 


public void setWorkout(long id) { 
this.workoutld = id; 

} 


As we said on the previous page, fragments are distinct from activities, and 
therefore don’t have all the methods that an activity does. Fragments don’t 
include a findViewByld () method, for instance. To get a reference to 
a fragment’s views, we first have to get a reference to the fragment’s root 
view using the get View () method, and use that to find its child views. 

Now that we’ve got the fragment to update its views, let’s take the app for 
a test drive. 


You should always call 
up to the superclass 
when you implement 
any fragment lifecycle 
methods. 


you are here ► 


367 


what happens 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


What happens when the code runs 

Before we run the app, let’s go through what happens when the 
code runs. 



© 


When the app is launched. MainActivity gets created. 

The user clicks on the button in MainActivity to start DetailActivity. 



© 


Detail Activity's onCreate() method runs. 

The onCreate () method specifies that activity_detail.xml should be used for 
DetailActivity’s layout, activity_detailxml includes a <f ragment> element with an ID 
of detail_f rag that refers to the fragment WorkoutDetailFragment. 



DetailActivity 


activity_detail.xml 


© 


WorkoutDetailFragment's onCreateView() method runs. 

The onCreateView () method specifies that fragment_workout_detail.xml should be used for 
WorkoutDetailFragment’s layout. It inflates the layout to a View object. 
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The story continues 
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WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


O 


© 


activity_detail.xmls Views are inflated to View Java objects. 

DetailActivity uses WorkoutDetailFragment’s View object in place of the 
<f ragment> element in its layout’s XML, and gives it an ID of detail_f rag. 

id: detail_frag 

activity_detail.xml view 

DetailActivity's onCreate() method continues to run. 

DetailActivity gets a reference to WorkoutDetailFragment by asking the fragment 
manager for the fragment with an ID of detail_f rag. 

onCreate() 

o 

MainActivity 


o 


Fragment Manager 


a 

WorkoutDetail 

Fragment 



© 


DetailActivity calls WorkoutDetailFragment's setWorkout() method. 

DetailActivity passes WorkoutDetailFragment a workout ID of 1. The fragment 
sets its workout Id variable to 1. 


onCreate() 



MainActivity 


setWorkout(l) 


A 


workoutld: 1 


WorkoutDetail 

Fragment 


© 


The fragment uses the value of the workout ID in its onStart() method to 
set the values of its views. 


onStartQ 



Fragment 


id: detail_frag 
textTitle: Core Agony 

textDescription: 100 Pull ups 
100 Push-ups 
100 Sit ups 
100 Squats 


Let’s take the app for a test drive. 
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test drive 

WorkoutDetailFragment 
WorkoutList Frag merit 
Coordinate fragments 

When we run the app, MainActivity is launched. 

When we click on MainActivity’s button, it starts 
DetailActivity. DetailActivity contains 
WorkoutDetailFragment, and the fragment displays 
details of the Gore Agony workout. 


Test drive the app 





N 


▼ A i 11:39 



Workout 


N 

▼ A 1 11:39 ^ 

Cl’ifck on -the 

% _ 

Workout 


button ••• 



Core Agony 


100 Pull-ups 
100 Push-ups 
100 Sit-ups 
100 Squats 




-and de-tails ot -the 
wov-kou-t av-e displayed- 



tkreicire no 

Dumb Questions 


O: Why can’t an activity get a fragment by calling the 
findViewByld () method? 


Because findViewByld () always returns a View 
object and, surprisingly, fragments aren’t views. 


Q: Why isn’t f indFragmentByld () an activity 
method like findViewByld () is? 


That’s a good question. Fragments weren’t available before 
AP111, so it uses the fragment manager as a way to add a whole 
bunch of useful code for managing fragments, without having to 
pack lots of extra code into the activity base class. 


% Why don’t fragments have a findViewByld () 
method? 


Because fragments aren’t views or activities. Instead, you 
need to use the fragment’s getview () method to get a 
reference to the fragment’s root view, and then call the view’s 
findViewByld () method to get its child views. 


% Activities need to be registered in AndroidManifest.xml so 
that the app can use them. Do fragments? 


No. Activities need to be registered in AndroidManifest.xml, but 
fragments don’t. 
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Where we've got to 

Here’s a reminder of the structure of the app, and what we 
want it to do: 


-w 


fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


© 

© 

© 

© 

© 


When the app gets launched, it starts Main Activity. 

MainActivity uses activity_main.xml for its layout, and contains a fragment 
called WorkoutListFragment. 

WorkoutListFragment displays a list of workouts. 

When the user clicks on one of the workouts. Detail Activity starts. 

DetailActivity uses activity_detail.xml for its layout, and contains a fragment 
called WorkoutDetailFragment. 

WorkoutDetailFragment uses fragment_workout_detail.xml for 
its layout. 

It displays the details of the workout the user has selected. 

WorkoutListFragment and WorkoutDetailFragment get their 
workout data from Workout.java. 

Workout.java contains an array of Workouts. 



activity_main.xml activity_detail.xml 



Phone 



So far we’ve created both activities and their 
layouts, WorkoutDetailFragment.java and its layout, 
and also Workout.java. The next thing we need to 
look at is WorkoutListFragment. 
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list fragment 


WorkoutDetailFragment 
WorkoutListFragment 

Coordinate fragments 

a fragment with a list 

We need to create a second fragment, 

WorkoutListFragment, that contains a list of the 
different workouts that the user can choose from. Using a 
fragment for this means that later on, we’ll be able to use it 
to create different user interfaces for phones and tablets. 


We need to create 



The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


The Limb Loosener 


5 Handstand push-ups 
10 1-legged squats 
15 Pull-ups 


for now w ere building -the 
phone U|, but later on 
we II be able to reuse the 
-fragments to create a 
di-f+erent U| -for a tablet- 



You’ve already seen how to add a list view to an activity, so 
we could do something similar for the fragment. But rather 
than create a new fragment with a layout that contains a 
single list view, we’re going to use a different approach that 
involves a new type of fragment called a list fragment. 
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A list fragment is a fragment 
that contains only a list 

A list fragment is a type of fragment that specializes in working with a 
list. It’s automatically bound to a list view, so you don’t need to create 
one yourself Here’s what one looks like: 


f\ list '(Valent £or*es 
Complete with its own list 
view so you don t need to . 
add it youvself - You just 
need to pvovide the list 
fv-ay*ent with data- 


The Limb Loosener 


Core Agony 


The Wimp Special 


Strength and Length 


There are a couple of major advantages in using a list fragment to 
display categories of data: 



fragments 

WorkoutDetailFragment 
WorkoutList Frag merit 
Coordinate fragments 


ListFragment is a 
subclass of Fragment- 

ir 



© 


You don't need to create your own layout. 

List fragments define their own layout programmatically, so 
there’s no XML layout for you to create or maintain. The layout 
the list fragment generates includes a single list view. You access 
this list view in your fragment code using the list fragment’s 
getListView () method. You need this in order to specify 
what data should be displayed in the list view. 


o 


You don't have to implement your own event listener. 

The ListFragment class automatically implements an event 
listener that listens for when items in the list view are clicked. 
Instead of creating your own event listener and binding it to 
the list view, you just need to implement the list fragment’s 
onListltemClick () method. This makes it easier to get your 
fragment to respond when the user clicks on items in the list view. 
You’ll see this in action later on. 


So what does the list fragment code look like? 


A list fragment 
is a type of 
fragment that 
specializes in 
working with a 
list view. It has 
a default layout 
that contains the 
list view. 
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create a list fragment 


How to create a list fragment 



WorkoutDetailFragment 

WorkoutListFragment 

Coordinate fragments 


You add a list fragment to your project in the same way you add a 
normal fragment. Highlight the com.hfad. workout package in the app/ 
src/main/java folder, then go to File—>New...—^Fragment—^Fragment 
(Blank). Name the fragment “WorkoutListFragment”, and then 
uncheck the options to create layout XML, and also the options 
to include fragment factory methods and interface callbacks (list 
fragments define their own layouts programmatically, so you don’t 
need Android Studio to create one for you). When you click on the 
Finish button, Android Studio creates a new list fragment in a file 
called WorkoutListFragment java in the app/src/main/java folder. 

Here’s what the basic code looks like to create a list fragment. As you 
can see, it’s very similar to that of a normal fragment. Replace the 
code in WorkoutListFragment java with the code below: 



package com.hfad.workout; 
import android.os.Bundle; 

import android.support.v4.app.ListFragment; 
import android.view.Layoutlnflater; 


o 

Workout 


UhdheCk these opt i oks, 
as we dom'i need them. 

I-P prompted -for the 
■fragment's sourde language, 
LQJ the option -for Java, 

app/sre/main 

l| 

import android. view. View; TVie activity needs to extend 1 - 5 


import android.view.ViewGroup; 


ListFragment, not Fragment- 

V 

public class WorkoutListFragment extends ListFragment { 


java 


MTJ 


com. hfad .workout 

U 


WorkoutList 

Fragment.java 


@Override 

public View onCreateView (Layoutlnf later inf later, ViewGroup container". 

Bundle savedlnstanceState) { 


} 


return 


super.onCreateView(inflater, container, savedlnstanceState); 




Calling the superdlass onCreatel/iewO method gives 
you the de-fault layout -for the ListFragment- 


The above code creates a basic list fragment called 
WorkoutListFragment. As it’s a list fragment, it needs to 
extend the ListFragment class rather than Fragment. 

The onCreateView () method is optional. It gets called 
when the fragment’s view gets created. We’re including it in 
our code as we want to populate the fragment’s list view with 
data as soon as it gets created. If you don’t need your code 
to do anything at this point, you don’t need to include the 
onCreateView () method. 

The next thing we need to do is add data to the list view in 
the onCreateView () method. 


tlierejcire w 

Dumb Questions 


0.: When we create a list fragment, why do we 
choose the option for Fragment (Blank) instead of 
Fragment (List)? 

The Fragment (List) option produces code that’s 
more complex, most of which we don’t need to use. The 
code generated by the Fragment (Blank) is simpler. 


374 Chapter 9 














Adapters revisited 

As we said in Chapter 7, you can connect data to a list view 
using an adapter. The adapter acts as a bridge between the 
data and the list view. This is still the case when your list view 
is in a fragment, or a list fragment: 



fragments 

WorkoutDetailFragment 
WorkoutList Frag merit 
Coordinate fragments 


Our data's *m an 
array, but we — 
dould have used 
a database or 
a web service 
instead- 


Data 

Source 


Adapter 


> 


f 


Tbe adapter bridges tbe $ap between tbe list 
view and tbe data sourde- Adapters allow list 
views to display data -from a variety o( sourdes. 


We want to supply the list view in Workout List Fragment 
with an array of workout names, so weil use an array adapter 
to bind the array to the list view as before. As you may 
recall, an array adapter is a type of adapter that’s used to 
bind arrays to views. You can use it with any subclass of the 
AdapterView class, which means you can use it with both list 
views and spinners. 

In our case, we’re going to use an array adapter to display an 
array of data from the Workout class in the list view. 


ListView 


An adapter acts as a 
bridge between a view 
and a data source. An 
array adapter is a 
type ol adapter that 
specializes in working 
with arrays. 


Tbis is -tbe array- 

4r 


Well drea-te a* array adapter -to 
bind our lis-t view -to a* array. 

ir 


This is our list view- 

v 


Workout 


Array 


ListView 

names 


. Adapter - 



\_S. 

X 





X 

1 -7 



We’ll see how this works on the next page. 
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array adapters revisited 


WorkoutDetailFragment 

WorkoutListFragment 

Coordinate fragments 


Our previous array adapter 

As we said in Chapter 7, you use an array adapter by initializing it 
and attaching it to the list view. 

To initialize the array adapter, you first specify what type of data is 
contained in the array you want to bind to the list view. You then 
pass it three parameters: a Context (usually the current activity), a 
layout resource that specifies how to display each item in the array, 
and the array itself. 

Here’s the code we used in Chapter 7 to create an array adapter to 
displays Drink data from the Drink, drinks array: 


v 


ArrayAdapter<Drink> listAdapter = new ArrayAdapterO ( 


The euvv-errl doyrte*t \ y \ 
ouv Chapter 1 scenario, it 
was the Current activity* 


^-^this, 

android.R.layout.simple_list_item_l, 
Drink.drinks) ; ^The array 


This is a built-in layout 
^— resource- It tells the array 
adapter to display eaeh item i» 
the array in a single te*t view. 


There’s a big difference between the situation we had back in 
Chapter 7 and the situation we have now. Back in Chapter 7, we 
used the array adapter to display data in an activity. But this time, we 
want to display data in a fragment. What difference does this make? 


A fragment isn't a subclass of Context 

As you saw earlier in the book, the Activity class is a subclass of 
the Context class. This means that all of the activities you create 
have access to global information about the app’s environment. 

But the Fragment class isn't a subclass of the Context class. It 
has no access to global information, and you can’t use this to pass 
the current context to the array adapter. Instead, you need to get the 
current context in some other way. 

One way is to use another object’s getContext () method 
to get a reference to the current context. If you create the 
adapter in the fragment’s onCreateView () method, you can 
use the getContext () method of the onCreateView () 
Layoutlnflator parameter to get the context instead. 

Once you’ve created the adapter, you bind it to the ListView using 
the fragment’s set List Adapter () method: 

setListAdapter(listAdapter); 

We’ll show you the full code on the next page. 
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The updated WorkoutlistFragment code 

We’ve updated our WorkoutListFmgment.java code so that it 
populates the list view with the names of the workouts. Apply 
these changes to your code, then save your changes: 


v 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


package com.hfad.workout; 

import android.os.Bundle; 

import android.support.v4.app.ListFragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 


import android.widget.ArrayAdapter; 




□ 

Workout 

HU 

app/src/main 

L a 

java 

WicVc usm^ this fclass m the |_IjS 

onOealeViewO method- com.hfad.workout 

U 


public class WorkoutListFragment extends ListFragment { 


WorkoutList 

Fragment.java 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

String[] names = new String[Workout.workouts.length]; 
for (int i = 0; i < names.length; i++) { 

names[i] = Workout.workouts[i].getName(); ^ 

Cveaie an array adapter- Create a String array o-f the workout names. 

V 


} 


ArrayAdapter<String> adapter = new ArrayAdapterO ( 

£jet the dor>te%t tv-om ^ inf later. getContext () , android. R. layout. simple_lis t_i tem_l, 

the layout intlater. names) ; 

setListAdapter (adapter) ; Bind the array adapter to the list view. 


return super.onCreateView(inflater, container, savedlnstanceState); 


} 

Now that the WorkoutListFragment contains a list of 
workouts, let’s add it to MainActivity. 
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display WorkoutListFragment 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 

in the MainActivity layout 

We’re going to add our new WorkoutListFragment 
to MainActivity’s layout activity_main.xml. The layout 
currently displays a button that we’re using to navigate 
from MainActivity to DetailActivity: 


display WorkoutListFragment 


N 

▼ A i 11:39 1 

Workout 



MaihA^iivi-fcys 

layout £u\nrently 
displays a button 



We want to remove the button, and display 
WorkoutListFragment in its place. Here’s what the 
new version of the layout will look like: 


I/Ve Ye <^oin^ to dban^e tbe 
layout so that it displays 
WbvkoutListFv-a^ent 
instead o£ tbe button. 



N 

Workout 

▼ a ta 16:11 ^ 


The Limb Loosener 



Core Agony 



The Wimp Special 1 


Strength and Length 



What will the code be like? Have a go at the exercise on 
the next page. 
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Layout Magnets 


Somebody put a new version of activity_main.xml on our fridge door. 
Unfortunately some of the magnets fell off when we shut the door too 
hard. Can you piece the layout back together again? (You won't need to 
use all of the magnets below.) 


The layout needs to display WorkoutListFragment. 


<?xml version^"1.0" encoding="utf-8"?> 


< 


xmlns : android =,, http : / /schemas . android. com/apk/res/android" 


android:layout_width="match_parent" 


android:layout_height="match_parent"/> 


| fragment jj 

android: fragment J Fragment 1 


P:om.hfad.workout. | 

1 LinearLayoutH 

_______android: name 

[ 
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Layout Magnets Solution 

Somebody put a new version of activity_main.xml on our fridge door. 
Unfortunately some of the magnets fell off when we shut the door too 
hard. Can you piece the layout back together again? (You won't need to 
use all of the magnets below.) 


The layout needs to display WorkoutListFragment. 


<?xml version^"1.0" encoding="utf-8"?> 

^ Y° u dedare a -(ragmen-t wi-th -the drajmen-b element 



fragment 


xmlns:android="http://schemas.android.com/apk/res/android" 


android:name | =■> j com.hfad.workout. | WorkoutListFragment | 

^. T' . 

android: layout_width="match_parent" nCC d *to jWe *ti^e lull 

name o! -tV\e Iv-a^ment 


android:layout_height="match_parent"/> 
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The code for activity_main.xml 



fragments 

WorkoutDetailFragment 
WorkoutList Frag merit 
Coordinate fragments 


As we want MainActivity’s layout to only contain a single 
fragment, we can replace nearly all of the code we currently have. 


Here’s the updated code for activity_main.xml. As you can see, it’s 
much shorter than the original version. Update your version of 
the code to reflect our changes. 


<?xml version="1.0" encoding="utf-8"?> 

>rm Ins: ^nriro j H=i i h 1~ 1~ pr r / f n n h nm a S RnHrni - d 

"in 1 r i s:-bnrrj s / 1 & ^nd 1 "^ ~i gnm ^ 1 s'L 

s&r& nS id. l t iyuuL_width-"m^1~r’h _j >aj^ Qnt r u - 
Andrei d-* 1 ny n n*_h n i gTr l ~- ,, rm' | ~r , h ja 

vaa^^o ddij ^^-nntn1~i nn~”^r ri~i_rn 1 " 

- LuulU . c ontex t-"Cum. hf ad. wnrkout. Mai.nActivity u > 


<Rij ±tnp 


*r Wt 


longer need this button. 


androi d: laV01 li ~_ T » T ' i Hfh-"T.Trnp^nnfnnf" 

^ n d ~i H • 1 ayniit^hpi rrb±^rrnp_mnf nn^ "— 

^nHrniH.nnri n pV='Vp^hnwD^^-i 1 P . " 

nndrnj d • tr”t-"Qy r j ng/do^i i ^button" Zj*. 


<■ 


Ou\r layout only Contains a 
single -fragment, so we ean get 
rid ot the LinearLayout- 


ram /npl r / r^ n Andr^ i 


□ 

Workout 

mu 

app/sre/main 

H3 


res 


MU 

layout 


activity_main.xml 


< /-Li n^ir4 iymit^ 


^-Here's the -fragment- 


<fragment xmlns:android= M http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.WorkoutListFragment" 
android:layout_width="match_j?arent" 
android:layout_height="match_parent"/> 


We’ll go through what happens when this code runs over the next 
couple of pages. 
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what happens 


What happens when the code runs 

Here’s a ranthrough of what happens when we run the app. 



WorkoutDetailFragment 

WorkoutListFragment 

Coordinate fragments 


© 


When the app is launched, MainActivity gets created. 

MainActivity’s onCreate () method runs. This specifies that activity_main.xml should 
be used for MainActivity’s layout, activity_main.xml includes a <f ragment> element that 
refers to WorkoutListFragment. 



Device 


onCreateQ 



WorkoutListFragment is a ListFragment, so it uses a ListView as its layout. 




WorkoutList 

Fragment 


ListView 


WorkoutListFragment creates an Array Adapter < String >, an array adapter 
that deals with arrays of String objects. 


A: 


O 


WorkoutListFragment ArrayAdapter<String> 

Q The ArrayAdapter<String> retrieves data from the names array. 

A -O-O 

WorkoutListFragment ArrayAdapter<String> names 
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The story continues 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


e 


WorkoutListFragment attaches the array adapter to the ListView using the 
setListAdapter() method. 

The list view uses the array adapter to display a list of the workout names. 




Test drive the app- 

When we run the app, MainActivity gets launched. 

MainActivity’s layout contains the fragment 
WorkoutListFragment. The fragment contains a list 
of the workout names, and this is displayed in the activity. 



WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


ttevVs a list o£ all the 

workout titles -from 
the Workout tlass. 


N 

▼ y A Q 16:11 1 

Workout 



The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


That looks great, but when we click on one of the workouts, 
nothing happens. We need to update the code so that when 
we click on one of the workouts, details of that workout are 
displayed. 
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show the correct workout 


Connect the list to the detail 

There are a few ways that we can start DetailActivity 
and display the details of the workout that was clicked. We’ll 
use this technique: 


y/ WorkoutDetailFragment 
~ WorkoutListFragment 

-I I Coordinate fragments 


O 

o 

o 


Add code to WorkoutListFragment that waits for a workout to be clicked. 

When that code runs, call some code in MainActivityjava that will start 
DetailActivity, passing it the ID of the workout. 

Get DetailActivity to pass the ID to WorkoutDetailFragment so that 
the fragment can display details of the correct workout. 


We don’t want to write code in WorkoutListFragment 
that talks directly to Main Activity. Gan you think why? 


The answer is reuse. We want our fragments to know as little 
as possible about the environment that contains them so that 
we can reuse them elsewhere. The more a fragment needs to 
know about the activity using it, the less reusable it is. 



Wait a minute! You're saying you don't 
want the fragment to know about the 
activity that contains it? But I thought 
you said the fragment has to call code in 
MainActivity. Won't that mean we can't 
use it in another activity? 


We need to use an interface to decouple 
the fragment from the activity. 

We have two objects that need to talk to each other—the 
fragment and the activity—and we want them to talk 
without one side knowing too much about the other. 

The way we do that in Java is with an interface. When 
we define an interface, we’re saying what the minimum 
requirements are for one object to talk usefully to another. That 
means that we’ll be able to get the fragment to talk to any 
activity, so long as that activity implements the interface. 
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We need to decouple the fragment 
by using an interface 

We’re going to create an interface called Listener. 

If Main Activity implements the interface, 
WorkoutListFragment will be able to tell MainActivity 
when one of its items has been clicked. To do this, we’ll need to make 
changes to WorkoutListFragment and MainActivity. 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


What WorkoutListFragment needs to do 


Weil start with the code for WorkoutListFragment. There are a 
few changes we need to make, in this order. 


o 

o 

© 


Define the interface. -— 

We’ll define the listener’s interface in WorkoutListFragment. 

We’re defining the interface here, as its purpose is to allow 
WorkoutListFragment to communicate with any activity. 

Register the listener (in this case MainActivity) when 
WorkoutListFragment gets attached to it. 

This will give WorkoutListFragment a reference to MainActivity. 

Tell the listener when an item gets clicked. 

MainActivity will then be able to respond to the click. 


You Y\ttd to 

through similar steps 
to these whenever 
you have a -fragment 
that needs to 
tommunitate with 
the activity it's 
attached -to- 


Weil go through each change individually, then show you the full 
code. 


1. define the listener Interface 


We want any activities that implement the listener interface to 
respond to item clicks, so we’ll define a method for the interface, 
itemClicked (). The itemClicked () method has one 
parameter, the ID of the item that’s clicked. 


Here’s the interface: 


feL'"- 


We'll tall -the intertade Listener. 


interface Listener { 

void itemClicked (long id) ; 

}; 


Any activities that implement the Listener inter-fade must 
indlude this method- We II use it to get the activity to 
(respond -to items in the -fragment being dlidked- 


Next we’ll look at how you register the listener on the next page. 
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l. Register the listener 

We need to save a reference to the activity Workout List Fragment 
gets attached to. This activity will implement the Listener 
interface, so we’ll add the following private variable to 
WorkoutListFragment: 

private Listener listener; 

We need to set this variable when Workout List Fragment gets 
attached to an activity. If you look back at the fragment lifecycle, when 
a fragment gets attached to an activity, the fragment’s onAttach () 
method is called. We’ll use this method to set the value of the listener: 

public void onAttach(Context context) { 

super .onAttach (context) ; - This is the dorrbe%*t (in “this tase, the 

this. listener = (Listener) context; activity) “the -fragment is attached *to 

} 


sy WorkoutDetailFragment 
~ WorkoutListFragment 
Coordinate fragments 


3. Respond to clicks 

When an item in WorkoutListFragment gets clicked, we want to 
call the listener’s itemClicked () method. This is the method we 
defined in the interface on the previous page. But how can we tell when 
an item’s been clicked? 


Whenever an item gets clicked in a list fragment, the list fragment’s 
onListltemClick () method gets called. Here’s what it looks like: 


public void onListltemClick (ListView listView,^— The lis-t view 

View itemView,^ 


int position, S The item in the list view that was 
long id) { J clicked, its position, and its IP 


//Do something 


} 


The onListltemClick () method has four parameters: the list view, 
the item in the list that was clicked, its position, and the row ID of the 
underlying data. This means we can use the method to pass the listener 
the ID of the workout the user clicked on: 


public 

if 

} 


void onListltemClick(ListView 
(listener != null) { 
listener.itemClicked(id); 


listView, View itemView, int position, long 

Call the itemClickedO method in the activity, passing 
it the IP ot the workout the user selected- 


id) 


{ 


} 
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The code for WorkoutUstFragwent.java 

Here’s the full code for WorkoutListFragment.java code (apply these 
changes to your code, then save your work): 



fragments 

WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


package com.hfad.workout; 
import android.os.Bundle; 

import android.support.v4.app.ListFragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 
import android. content. Context P\ | m ^ or t -these tlasses. 
import android.widget.ListView; 

public class WorkoutListFragment extends ListFragment { 

static interface Listener { 

void itemClicked(long id); 


□ 

Workout 

4T3 

app/src/main 

4U 


}; 


Add the lis-tenev- -bo -the -fragment 


java_ 

MB 

com. hfad .workout 

L @ 

WorkoutList 

Fragment.java 


private Listener listener; 


QOverride 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

String[] names = new String[Workout.workouts.length]; 
for (int i = 0; i < names.length; i++) { 

names[i] = Workout.workouts[i].getName(); 

} 

ArrayAdapter<String> adapter = new ArrayAdapterO( 

inflater.getContext(), android.R.layout.simple_list_item_l, 
names); 

setListAdapter(adapter) ; 

return super.onCreateView(inflater, container, savedlnstanceState); 

} 

This is tailed when *the -Pv3<y*en*t 

@ Override (A attached to "the activity- Remember, the 

public void onAttach (Context context) { ^frtivrtv dlass is a subdiass o-C Context- 
super. onAttach (context) ; 
this.listener = (Listener)context; 

} 


@Override 

public void onListltemClick(ListView listView, View itemView, int position, long id) { 
if (listener != null) { 

listener. itemClicked (id) ; c" e listener when an item 
j in the Listl/iew is dlidked 

} 
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MainActivity needs to implement the interface 

Next we need to make MainActivity implement the Listener 
interface we just created. The interface specifies an itemClicked () 
method, so we’ll make the method start DetailActivity, passing 
it the ID of the workout the user selected. 

Here’s the full code for MainActivity.java. Update your code so that it 
matches ours. 


package com.hfad.workout; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.content.Intent; 


□ 

Workout 


Hn 

app/src/main 

vs 

java 


public class MainActivity extends AppCompatActivity 


^3 

com. hfad. workout 

L R 

implements WorkoutListFragment.Listener { I J 

MainActivity.java 

ImplemeKri the lis-tenev- iivtc\rfde-fmed i y\ Wov-kou^Lis^FrdArnCKrt. 

QOverride J 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

} This is the method tailed by MainAttWity's 

button- We've (removed the button, so we no 
l> k £Vi e.w -y r-£wl " \ lon^eV" need this met d 
ifTtrefrC^g n^ w Intej at (tvki.8->—_ 
td s a&i ty ( i n 

^ This mcihod is defined by ihc 

m-ter-Pade, SO we heed {o ir»plemerrt it 

@Override 

public void itemClicked(long id) { 

Intent intent = new Intent(this, DetailActivity.class); 
intent.putExtra(DetailActivity.EXTRA_WORKOUT_ID, (int)id); 
startActivity (intent) ; N p ass ^ |£ J ^ wo ^out to DetailActivity 

> E/TRAjVOR^OUTJD is the name ot a 

dohS'tcih’t v/cMI define ih DeiailAfrtM'ty- 


Those are all the changes we need to make to MainActivity. 
There’s just one more code change we need to make to our app. 
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PetailActivity needs to pass the IP 
to WorkoutPetailFragment 

So far, Workout Li st Fragment passes the ID of the workout 
that was clicked to MainActivity, and MainActivity 
passes it to DetailActivity. We need to make one more 
change, which is to pass the ID from DetailActivity to 
WorkoutDetailActivity. 

Here’s the updated code for DetailActivity that does this. 
Update your version of DetailActivity.java to reflect our changes: 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 


package com.hfad.workout; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

public class DetailActivity extends AppCompatActivity { 


□ 

Workout 

app/src/main 

HM 


java_ 

MB 

com. hfad. workout 


Were no 
longer 
hard^oding 
dn ID I , 

so remove 
this lihe- 


public static final String EXTRA_WORKOUT_ID = "id";^ |_pL 

Mrt usmg a fcowUt U ? ass the IP W MamMMy ^ java 

@Override to petailA^tivity to avoid hardtodmg this value- 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_detail); 

WorkoutDetailFragment frag = (WorkoutDetailFragment) 

getSupportFragmentManager().findFragmentByld(R.id.detail_frag); 

int workoutld = (int) getlntent().getExtras().get(EXTRA_WORKOUT_ID); 

frag. setWorkout (workoutld) ; l „ , ,. . . . , 

t)t t the IP trom the intent, 

^ and pass it to the -fragment 

via its setWorkoutO method- 


Over the next couple of pages we’ll examine what happens when the 
code runs. 
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what happens 


What happens when the code runs 

Here’s a runthrough of what happens when we run the app. 

Q When the app is launched, MainActivity gets created. 

WorkoutListFragment is attached to MainActivity, and 
WorkoutListFragment’s onAttach () method runs. 


v 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 



onAttachQ 


Devjce MainActivity WorkoutListFragment 

(3) WorkoutListFragment registers MainActivity as a Listener. 




o o 


WorkoutList 
Fragment 

When an item is clicked in WorkoutListFragment, the fragments 
onListItemClick() method is called. 

This calls MainActivity’s itemClicked () method, passing it the ID of the workout that 
was clicked, in this example 1. 


itemClicked(l) 



/ 


WorkoutList 

Fragment 


MainActivity 


MainActivity's itemClicked() method starts DetailActivity, passing it the 
value of the workout ID in an intent. 


Intent 
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The story continues... 
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WorkoutDetailFragment 
WorkoutListFragment 
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O 


DetailActivity calls WorkoutDetailFragments setWorkout() method, passing it 
the value of the workout ID. 

WorkoutDetailFragment uses the workout ID, in this case 1, to display the workout title 
and description in its views. 



DetailActivity 


*A 


set Workou t(l) ^ textTitle: Core Agony 

textDescription: 100 Pull ups 
100 Push-ups 
100 Sit ups 

WorkoutDetailFragment 100 Squats 



Test drive the app- 

When we run the app, MainActivity gets 
launched. It displays a list of workouts in its fragment, 
WorkoutListFragment. 

When you click on one of the workouts, DetailActivity is 
displayed. It shows details of the workout that we selected. 


v 

v 

-►E2 


WorkoutDetailFragment 
WorkoutListFragment 
Coordinate fragments 



you’ll see how to reuse the fragments, and create a different 
user interface that will work better for tablets. 
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Your Android Toolbox 


You’ve got Chapter 9 under 
your belt and now you’ve 
added fragments to your 
toolbox. 


Fragment lifecycle methods 

onAttach() 


onCreate() 



BULLET POINTS 


■ A fragment is used to control 
part of a screen. It can be 
reused across multiple 
activities. 


■ The Fragment class doesn't 
extend the Activity class 
or implement the Context 
class. 


A fragment has an associated 
layout. 

The onCreateView() 

method gets called each time 
Android needs the fragment’s 
layout. 

Add a fragment to an 
activity’s layout using the 
<f ragment> element and 
adding a name attribute. 

The fragment lifecycle 
methods tie in with the states 
of the activity that contains the 
fragment. 


Fragments don’t have a 
f indViewByld () method. 
Instead, use the getview () 
method to get a reference to 
the root view, then call the 
view’s f indViewByld () 
method. 

A list fragment is a fragment 
that comes complete 
with a Listview. You 
create one by subclassing 

ListFragment. 


You da* download 
the -full Code for 
the Chapter from 
http*://tmywrlCom/ 
HeadfirstAndroid- 


onCreateViewQ 


onActivityCreated() 


onStart() 


onResumeO 


onPause() 


onStop() 


on Destroy View() 


onDestroy() 


onDetach() 
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10 fragments for larger interfaces 


Different Size, * 

# Different Interface 



So far we've only run our apps on devices with a small screen. 

But what if your users have tablets? In this chapter you’ll see how to create flexible user 
interfaces by making your app look and behave differently depending on the device it’s 
running on. We’ll show you how to control the behavior of your app when you press the 
Back button by introducing you to the back stack and fragment transactions. Finally, 
you’ll find out how to save and restore the state of your fragment. 


this is a new chapter 
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we need a bigger screen 


The Workout app looks the same on a phone and a tablet 

In the previous chapter, we created a version of the Workout app 
designed to work on a phone. 

As a reminder, when the app launches, it displays Main Activity. 

This contains a fragment, Workout List Fragment, that displays 
a list of workouts. When the user clicks on one of the workouts, 

DetailActivity starts, and displays details of the workout in its 
fragment, WorkoutDetailFragment. 


N 

T A Q 15:46 M 

Workout 



Clitk oy \ an i'tew' 3 list, and 

rt laundhes a sedond adiwi-ty- 


The Limb Loosener 

N 

* ^ Q 15:47 

Core Agony 

Workout 


The Wimp Special ^ 

The Wimp Special 

5 Pull-ups 

10 Push-ups 

15 Squats 

Strength and Length 


When we run the app on a tablet, the app works in exactly 
the same way. As the screen size is larger, however, there’s 
lots of empty space in the user interface that we could 
make better use of. 
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Resigning for larger interfaces 

One way in which we could better use the empty space is to 
display details of the workout to the right of the list of workouts. 
When the user clicks on one of the workouts, details of that 
workout could be displayed on the same screen without us 
having to start a second activity: 



We don’t want to change our app completely though. We still 
want our app to work as it does currently if it’s running on a 
phone. 

We’re going to get our app to adapt to the type of device it’s 
running on. If the app’s running on a phone, we’ll display details 
of the workout in a separate activity (this is the app’s current 
behavior). If the app’s running on a tablet, we’ll display details 
of the workout next to the list of workouts. 

Before we get started, let’s remind ourselves how the app’s 
currently structured. 
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The phone version of the app 

The phone version of the app we built in Chapter 9 works in 
the following way: 


© 

0 

e 

o 

o 


When the app gets launched, it starts MainActivity. 

MainActivity uses activity_main.xml for its layout, and contains a fragment 
called WorkoutListFragment. 

WorkoutListFragment displays a list of workouts. 

When the user clicks on one of the workouts, DetailActivity starts. 

DetailActivity uses activity_detail.xml for its layout, and contains a fragment 
called WorkoutDetailFragment. 

WorkoutDetailFragment uses fragment_workout_detail.xml for 
its layout. 

It displays the details of the workout the user has selected. 

WorkoutListFragment and WorkoutDetailFragment get their 
workout data from Workout.java. 

Workout.java contains an array of Workouts. 



activity_main.xml activity_detail.xml 



Phone 



So how does it need to work differently on a tablet? 
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The tablet version of the app 

Here’s how the app will work when it runs on a tablet: 


o 

© 

© 

© 


When the app gets launched, it starts MainActivity as before. 

MainActivity uses activity_main.xml for its layout. 

MainActivity's layout displays two fragments, 
WorkoutListFragment and WorkoutDetailFragment. 

WorkoutListFragment displays a list of workouts. 

It’s a list fragment, so it has no extra layout file. 

When the user clicks on one of the workouts, its details are 
displayed in WorkoutDetailFragment. 

WorkoutDetailFragment uses fragment_workout_detail.xml for its layout. 


© 


Both fragments get their workout data from Workout.java as 
before. 


fl 

Tablet 



Fragment.java 

© 


There are two key differences. 

The first is that MainActivity’s layout needs to display 
both fragments, not just WorkoutListFragment. 


fragment_ 

workout_detail.xml 


The second difference is that we no longer need to 
start DetailActivity when the user clicks on 
one of the workouts. Instead, we need to display 
WorkoutDetailFragment in MainActivity. 


We’ll go through the steps for how to change the app on the 
next page. 
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Here's what we're going to do 

There are a number of steps we’ll go through to change the app: 


Q Create a tablet AVD 

(Android Virtual Device). 

We’re going to create a new UI 
for a tablet, so we’ll create a new 
tablet AVD to run it on. This will 
allow us to check how the app 
looks and behaves on a device 
with a larger screen. 


@ 


Create a new tablet layout. 

We’ll reuse the fragments we’ve 
already created in a new layout 
that’s designed to work on devices 
with larger screens. We’ll display 
details of the first workout in the 
first instance so that we can see 
the fragments side by side. 


I . ■ 



The Limb Loosener The Limb Loosener 

5 Handstand push-ups 
10 1-legged squats 

Core Agony 15 Pull-ups 

T 

The Wimp Special f hardtodc 

•the app so rt displays "the 

Strength and Length Limb Loosener workout 


o 


Display details of the 
workout the user selects. 

We’ll update the app so that 
when the user clicks on one of 
the workouts, we’ll display the 
details of the workout the user 
selected. 




We’re going to update the Workout 
app in this chapter, so open your 
original Workout project from 
Chapter 9 in Android Studio. 
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Create a tablet AVP 


Before we get into changing the app, we’re going to create a new Nexus 
7 AVD running API level 25 so that you can see how the app looks and 
behaves when it’s running on a tablet. The steps are nearly the same as 
when you created a Nexus 5X AVD back in Chapter 1. 


Create AVD 
Create layout 
Show workout 


Open the Android Virtual Pevice Manager 

You create AVDs using the AVD Manager. Open the 
AVD Manager by selecting Android on the Tools menu 
and choosing AVD Manager. 


e o o 


Android Virtual D 


WM 


/ ^ Your Virtual Devices 

Android Studio 




You’ll be presented with a screen showing you a list of the 
AVDs you’ve already set up. Click on the Create Virtual 
Device button at the bottom of the screen. 


Clidk OY\ {he Cv-eate Virtual 
Pc vide button to dreate an AVP- 



Select the 
hardware 

On the next screen, 
you’ll be prompted 
to choose a device 
definition, the type 
of device your AVD 
will emulate. 

We’re going to see 
what our app looks 
like running on 
a Nexus 7 tablet. 
Choose Tablet from 
the Category menu 
and Nexus 7 from 
the list. Then click 
the Next button. 


Virtual Device Configuration 
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create avd 


Creating a tablet AVP (continued) 



Create AVD 
Create layout 
Show workout 


Select a system image 

Next, you need to select a system image. The system image gives 
you an installed version of the Android operating system. You can 
choose the version of Android you want to be on your AVD. 

You need to choose a system image for an API level that’s 
compatible with the app you’re building. As an example, if you want 
your app to work on a minimum of API level 19, choose a system 
image for at least API level 19. As in Chapter 1, we want our AVD 
to run API level 25, so choose the system image with a release name 
of Nougat and a target of Android 7.1.1, the version number of API 
level 25. Then click on the Next button. 


Well ehoose 
the same 


system image —^ 
as we did ih 


Chapter I. 
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Creating a tablet AVP (continued) 
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Create AVD 
Create layout 
Show workout 


Verify the AVV configuration 

On the next screen, you’ll be asked to verify the AVD 
configuration. This screen summarizes the options you chose 
over the last few screens, and gives you the option of changing 
them. Change the screen startup orientation to Landscape, 
then click on the Finish button. 



The AVD Manager will create the Nexus 7 AVD for you, and 
when it’s done, display it in its list of devices. You may now 
close the AVD Manager. 

Now that we’ve created our tablet AVD, we can get to work 
on updating the Workout app. We want to change the app so 
that MainActivity uses one layout when it’s running on a 
phone, and another layout when it’s running on a tablet. But 
how can we do this? 
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different resources for different screens 


Create AVD 
Create layout 
Show workout 


Put screen-specific resources in 
screen-specific folders 

Earlier in the book, you saw how you could get different 
devices to use image resources appropriate to their screen 
size by putting different-sized images in the different drawable* 
folders. As an example, you put images intended for devices 
with high-density screens in the drawable-hdpi folder. 

You can do something similar with other resources such as 
layouts, menus, and values. If you want to create multiple 
versions of the same resource for different screen specs, you 
need to create multiple resource folders with an appropriate 
name, then add the resource to that folder. The device will 
then load the resource at runtime from the folder that’s the 
closest match to its screen spec. 

If you want to have one layout for large screen devices such as 
tablets, and another layout for smaller devices such as phones, 
you put the layout for the tablet in the app/src/main/res/layout- 
large folder, and the layout for the phone in the app/src/main/ 
res/layout folder. When the app runs on a phone, it will use the 
layout in the layout folder. If it’s run on a tablet, it will use the 
layout in the layout-large folder instead. 


v 


Android uses the names 
ol your resource lolders to 
decide which resources it 
should use at runtime. 

Layouts in the layout 
lolder can he used hy any 
device, hut layouts in the 
layout-large lolder will 
only he used hy devices 
with a large screen. 


□ 

app/src/main /\|| devices with smaller sdreens will load 

413 „ ^the layouts -from the layout -folder. 

r es _ ^ 

fo 

layout This la y°^ wll be used by 

devices with smaller screens. 

activity_main.xml 

Lar<xe devices like tablets 4H 
.ill load layout (.It. fro. Tfc layout ..II bo »wd by 

the layou-t-lavy -Colder. Q devides with a lar^e sdree*. 


activity main.xml 


On the next page, we’ll show you all the different options you 
can use for your resource folder names. 
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Create AVD 
Create layout 
Show workout 


v/ 


You can put all kinds of resources (drawables or images, layouts, 
menus, and values) in different folders to specify which types of 
device they should be used with. The screen-specific folder name can 
include screen size, density, orientation and aspect ratio, with each 
part separated by hyphens. As an example, if you want to create a 
layout that will only be used by very large tablets in landscape mode, 
you would create a folder called layout-xlarge-land and put the layout 
file in that folder. Here are the different options you can use for the 
folder names: 


You r*usj spedi-Cy a resourde type. 


£d\reen density is based 


Resource type 

drawable 
layout 
menu 
mipmap 
values 


A ndprnap 1 resou\rde is 
used -for applidaW 
idons. Oldev versions 
o-f Android Studio use 
drawables ms-tead- 


Screen size 

Screen density 

-small 

-ldpi 

-normal 

-mdpi 

-large 

-hdpi 

-xlarge 

-xhdpi 


-xxhdpi 


-xxxhdpi 


-nodpi ^- 


-tvdpi 


Orientation 

-land 

-port 


Aspect ratio 

-long 
-notlong 



lon^ is -for sdreens ■ 
*tbat have a very 
bi^b value -for bei^bi- 


This is -for density-independent 
■ resourdes. Use —nodpi -for any ir*a^e 
resourdes you don’t want to sdale 
(e.<y, a -folder dalled drawable— 


Android decides at runtime which resources to use by checking the 
spec of the device and looking for the best match. If there’s no exact 
match, it will use resources designed for a smaller screen than the 
current one. If resources are only available for screens larger than the 
current one, Android won’t use them and the app will crash. 

If you only want your app to work on devices with particular 
screen sizes, you can specify this in AndroidManifest.xml using the 
<supports-screens> attribute. As an example, if you don’t 
want your app to run on devices with small screens, you’d use: 

<supports-screens android:smallScreens="false"/> 

Using the different folder names above, you can create layouts that 
are tailored for phones and tablets. 


ov-^aW » 
orv tV'S W' 

/vratbte*' 
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exercise 



BE fjie pofcfet yfvuefute 

Below you’ll See the code for an 
activity. You want to display one 
layout when it runs on devices with 
large-sized screens, and 
another layout when 
it runs on devices with 
smaller-sized screens. 
Which of these folder 
structures will allow you to do that? 


import android.app.Activity; 
import android.os.Bundle; 




Heve’s the aetwity- 


public class MainActivity extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 


o a 

app/src/main 

-■ 

res 

H 

layout 


tj 


activity_main.xml 


layout-tablet 


activity_main.xml 


© a 

app/src/main 

La 


res 


layout 


activity_main.xml 

HB 

layout-large-land 


activity_main.xml 
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o a 

app/src/main 

4a 


m 

layout 


activity_main.xml 

HU 

layout-large 


activity_main.xml 


o a 

app/src/main 

4 H 


HT3 

layout 


activity_main.xml 


activity_main_tablet.xml 


© a 

app/src/main 


m 

layout-large 


activity_main.xml 

HU 

layout-normal 


activity_main.xml 


© a 

app/src/main 

41 


a 

layout 


activityjnain.xml 

ha 

layout-large-land 


l</XmlI 

activityjnain.xml 

4a 

layout-large-port 


activityjnain.xml 
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solution 


■RF fL' pjjcfev yfVUCfUte yo|uf)oti 



-okiuw ^uu il see the code for an 
activity. You want to display one 
layout when it runs on devices with 


large-sized screens, and 
another layout when 
it runs on devices with 
smaller-sized screens. 
Which of these folder 


structures will allow you to do that? 


import android.app.Activity; 
import android.os.Bundle; 

public class MainActivity extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 


super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 


o □ 


app/src/main 



© □ x 

onn/orp/moin ^ ^ 


app/src/main 



+oldev-—and *tha*t*s r\o*t 
v/ha*t you want 
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Devices with a large 
sdreen v/ill use the 
layout in the layout- 
large -folder. Devides 
with smaller sdreens 
will use the layout in 
the layout -folder. 



activity_main.xml 

tl 

layout-large 

activity_main.xml 



app/src/main 

41 


The adtivity uses a 
layout -file dalled 


CO 

HJB 

layout 


adtivity__main.%m|. 
The layout adtivi-ty_ 
main__tablet %r*l 
won’t be used 
bedause it has the 
wrong -filename- 



activity_main.xml 



activity_main_tablet.xml 


o □ X 

app/src/main 

453 


Devides with a large 
sdreen will use the 
layout in the layout- 
large -folder. Devi des 
with normal sdreens 
will use the layout 
in the layout-normal 
-folder. There J s no 
layout -for devides 
with a small sdreen, so 
they won’t be able to 
run the app. 


ha 

layout-large 


activityjnain.xml 

L Q 

layout-normal 


l</K-rr.ll 

activity_main.xml 



Devides with a large 
sdreen will use the 
layout in the layout- 
large-land -folder when 
the devide is turned 
landsdape, and the 
layout in the layout- 
large-port -folder when 
the devide is turned 
portrait- Other devides 
will use the layout in 
the layout -folder. 



activityjnain.xml 

-a 

layout-large-land 

activityjnain.xml 

t) 

layout-large-port 

activityjnain.xml 
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layout-large 


Tablets use layouts in the layout-large folder 



Create AVD 
Create layout 
Show workout 


To get the tablet version of our app up and running, we need to 
copy our existing activity layout file activity_main. xml into the app/ 
src/main/res/layout-large folder and then update that version of 
the file. This layout will then only be used by devices with a large 
screen. 

If the app /src/main/res /layout-large folder doesn’t exist in your 
Android Studio project, you’ll need to create it. To do this, 
switch to the Project view of Android Studio’s explorer, highlight 
the app/src/main/res folder, and choose File—>New...—^Directory. 
When prompted, give the folder a name of “layout-large”. When 
you click on the OK button, Android Studio will create the new 
app/src/main/res/layout-large folder. 

To copy the activity_main.xml layout file, highlight the file in the 
explorer, and choose the Copy command from the Edit menu. 
Then highlight the new lay out-large folder, and choose the Paste 
command from the Edit menu. Android Studio will copy the 
activity_main. xml file into the app/src/main/res/layout-large folder. 

If you open the file you just pasted, it should look like this: 

<?xml version="l.0" encoding="utf-8"?> 


▼ Dapp 
► D build 
▼ O src 

► OandroidTest/java 
▼ Omain 
► Cl java 
▼ Dires 
▼ O layout 

<> a ctivity_d eta i 11 
■ activityjnain.l 
iMfranmpn t worl 
>▼ (fa layout-large) 


IWs -the -foldev 
Android S-tudio Created- 


<fragment xmlns:android="http://schemas.android.com/apk/res/android" 


android:name="com.hfad.workout.WorkoutListFragment" 


android:layout_width="match_parent" 
android:layout_height="match_parent"/> 


\ t 

Me VC Y\OT, 


This is exactly the same layout that we had before. It contains 
a single fragment, Workout List Fragment, that displays 
a list of workouts. The next thing we need to do is update 
the layout so that it displays two fragments side by side, 
WorkoutListFragment and WorkoutDetailFragment. 


thawed the 
layout, just 
Copied it to 
the layout- 
lavje toldcv-. 


a 

Workout 

HB 

app/sre/main 

L Q 


i 

MB 

layout-large 


activity_main.xml 
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The layout-large version of the layout 
needs to display two fragments 


fragments for larger interfaces 

Create AVD 
Create layout 
Show workout 


v/ 


We’re going to change the version of activity_main.xml in 
the lay out-large folder so that it contains the two fragments. 
To do this, we’ll add the fragments to a linear layout with 
the orientation set to horizontal. We’ll adjust the 
width of the fragments so that Workout List Fragment 
takes up two-fifths of the available space, and 
Workout Detail Fragment takes up three-fifths. 


Our version of activity_main.xml is below. Update your code 
to reflect our changes. Make sure that you only edit the 
tablet version of the layout that’s in the layout-large folder. 

<?xml versions"1.0" encoding= M utf-8 M ?> 



VVere putting the -fragments m a 
LinearLayout with a horizontal 
orientation so the two -fragments will 
be displayed alongside eaeh other. 


CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 


The 

-fragments 
need IDs 
so that 
Android 
doesn^t 
lose traek 
o-P where 
to put 
eaeh 

-fragment- 


□ 

Workout 


4Hi 

app/sre/main 

4bI 


I CO 

La 

layout-large 


android:orientation="horizontal" 
android:layout_width="match_parent" 
android:layout_height="match_j?arent"> 

Our layout already includes 
<fragment 1/VorkoutListFragment- ^ 

android:name="com.hfad.workout.WorkoutListFragment" 

android:id="@+id/list_frag" 
android:layout_width="Odp" 

android:layout_weight="2" 1 

android: layout_height="match_parent"/> activity_main.xml 

Were adding WbrkoutDetailFragment 

<fragment to MainA^tivity s layout- 

android:name="com.hfad.workout.WorkoutDetailFragment" 
android:id="@+id/detail_frag" 
android:layout_width="Odp" 
android:layout_weight="3" 
android:layout_height="match_j?arent"/> 

</LinearLayout> 



We’ll run through what happens when the code runs on the 
next page. 
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What the updated code does 

Before we take the app for a test drive, let’s go through what 
happens when the code runs. 



Create AVD 
Create layout 
Show workout 


© 


When the app is launched, MainActivity gets created. 

MainActivity’s onCreate () method runs. This specifies that 
activity_main.xml should be used for MainActivity’s layout. 





If the apps running on a tablet, it uses the version of 
activity_main.xml that's in the layout-large folder. 

The layout displays Workout List Fragment and 
WorkoutDetailFragment side by side. 



Android activity_main.xml 


( ^ 


If the apps running on a device with a smaller screen, it uses 
the version of activity_main.xml thats in the layout folder. 

The layout displays Workout List Fragment on its own. 



Android activity_main.xml 
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Test drive the app 
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Create AVD 
Create layout 
Show workout 


V 

-►Iv 


When you run the app on a phone, the app looks just as it did 
before. MainActivity displays a list of workout names, and 
when you click on one of the workouts, DetailActivity 
starts and displays its details. 


0 y \ a phone, -the app looks 
-the same as it did betore- 



When you run the app on a tablet, MainActivity 
displays a list of workout names on the left, and details 
of the first workout appear next to it. 


E • 

* □ 16:36 ^ 

Workout 


The Limb Loosener 

Core Agony 

The Limb Loosener . . , , r . , 

5 Handstand push-ups ^ Details ok this v/ovkout appear 

io i -legged squats because we*ve \\ardtodcA it to. I 

15 Pull-ups ■ 

The Wimp Special 

Strength and Length 

ftare are -the two tvagme«ts, 1 

o»e «ext to the othev. 1 


When you click on one of the workouts, DetailActivity 
still gets displayed. We need to change our code so that if the 
app’s running on a tablet, DetailActivity no longer starts. 
Instead, we need to display details of the workout the user selects 
in MainActivity, and not just the first workout. 
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We need to change the itemClickedO code 



Create AVD 
Create layout 
Show workout 


We need to change the code that decides what to do when 
items in Workout List Fragment are clicked. This means 
that we need to change the itemClicked () method in 
MainActivity. Here’s the current code: 


a 

Workout 

K3 


public class MainActivity extends AppCompatActivity 

implements WorkoutListFragment.Listener { 


app/src/main 

H3 


java 


MT3 


@Override 

public void itemClicked(long id) { 

Intent intent = new Intent(this, DetailActivity.class); 


com. hfad .workout 



MainActivity.java 


} 


} 


intent.putExtra(DetailActivity.EXTRA_WORKOUT_ID, (int)id); 


startActivity(intent); 


A 

This is -the i-fcemClickedO method 
'"rote in the previous Chapter. It 
DetailActivity, and passes it the 
the workout that was clicked- 


starts 

ID of 


The current code starts DetailActivity whenever 
the user clicks on one of the workouts. We need to change 
the code so that this only happens if the app’s running 
on a device with a small screen such as a phone. If the 
app’s running on a device with a large screen, when the 
user picks a workout we need to display the details of 
the workout shown to the right of the list of workouts in 
WorkoutDetailFragment. 


Put how do we update the workout details? 

The WorkoutDetailFragment updates its views when it 
is started. But once the fragment is displayed onscreen, how 
do we get the fragment to update the details? 

You might be thinking that we could play with the fragment’s 
lifecycle so that we get it to update. Instead, we’ll replace 
the detail fragment with a brand-nezv detail 
fragment, each time we want its text to change. 

There’s a really good reason why... 
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You want fragments to work with the Pack button 

Suppose you have a user that runs the app on a phone. When they click 
on a workout, details of that workout are displayed in a separate activity. If 
the user clicks on the Back button, they’re returned to the list of workouts: 


N 

* 'A Q 15:46 ! 

Workout 

H 


The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


The user 
elieks oy\ a 
workout*. 



The Wimp Special 

5 Pull-ups 
10 Push-ups 
15 Squats 

...and sees the details 
in a separate activity 



Then suppose the user runs the app on a tablet, and clicks 
on one workout, followed by a second workout. If they click 
on the Back button, they’re probably going to expect to be 
returned to the first workout they chose: 




button, we’ve been returned to the previous activity. This is standard 
Android behavior, and something that Android has handled for 
us automatically. If we’re running this particular app on a tablet, 
however, we don’t want the Back button to return us to the previous 
activity. We want it to return us to the previous fragment state. 
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Welcome to the back stack 

When you go from activity to activity in your app, Android keeps 
track of each activity you’ve visited by adding it to the back 
stack. The back stack is a log of the places you’ve visited on the 
device, each place recorded as a separate transaction. 


A back stack scenario 


o 


Suppose you start by visiting a fictitious activity in 
your app, Activityl. Android records your visit to 
Activityl on the back stack as a transaction. 


v 

v 


Create AVD 
Create layout 
Show workout 



O 


You then go to Activity2. Your visit to Activity2 
is added to the top of the back stack as a separate 
transaction. 



o 


You then go to Activity3. Activity3 is added to the 
top of the back stack. 



o 


When you click on the Back button, Activity3 pops off 
the top of the back stack. Android displays Act ivity2, 
as this activity is now at the top of the back stack. 


o 


If you click on the Back button again, Activity2 pops 
off the top of the back stack, and Activityl is displayed. 
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Pack stack transactions 
don't have to be activities 


Create AVD 
Create layout 
Show workout 


We’ve shown you how the back stack works with activities, but 
the truth is, it doesn’t just apply to activities. It applies to any 
sort of transaction, including changes to fragments. 



These are two di£Pereivt 
'fragment transactions (or 
1/VorkoutDetailFragment- The top 
one displays details o( the Cove 
Agony workout, and the bottom one 
displays details of the Mmp Special- 


This means that fragment changes can be reversed when you 
click on the Back button, just like activity changes can. 



So how can we record changes to fragments as separate 


l/Vhen you click oy\ the Back button, 
the transaction that Contains details 
o( the Core Agony is popped o£P the 
top ot the back stack. Details o( 
the Mmp Special are displayed- 


transactions on the back stack? 


Pow't update—instead, replace 

We’re going to replace the entire WorkoutDetailFragment 
with a new instance of it each time the user selects a different 
workout. Each new instance of WorkoutDetailFragment 
will be set up to display details of the workout the user selects. 
That way, we can add each fragment replacement to the back 
stack as a separate transaction. Each time the user clicks on 
the Back button, the most recent transaction will be popped off 
the top of the stack, and the user will see details of the previous 
workout they selected. 

To do this, we first need to know how to replace one fragment 
with another. We’ll look at this on the next page. 


Android builds the 
hack stack as you 
navigate from one 
activity to another. 
Each activity is 
recorded in a separate 
transaction. 
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frame layout 


Use a frame layout to replace 
fragments programmatically 


To replace one fragment with another in MainActivity’s 
tablet user interface, we need to begin by making a change to 
the activity_main.xml layout file in the layout-large folder. Instead 
of inserting WorkoutDetailFragment directly using the 
<f ragment> element, we’ll use a frame layout. - 

We’ll add the fragment to the frame layout programmatically. 
Whenever an item in the Workout List Fragment list view 
gets clicked, we’ll replace the contents of the frame layout with 
a new instance of WorkoutDetailFragment that displays 
details of the correct workout. 


1/Ve dovev-ed 
( v-ar^c layouts 

m Chapter 5. 


Here’s our new version of the code for activity_main.xml in the 
layout-large folder. Update your code to include our changes. 


V 

\/ 


Create AVD 
Create layout 
Show workout 


Add a fragment using 
a <FrameLayout> 
whenever you need 
to replace fragments 
programmatically, such 
as when you need to 
add fragment changes 
to the hack stack. 


<?xml version="1.0" encoding="utf-8"?> 
CLinearLayout xmlns:android="http://schemas 
android:orientation="horizontal" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 


android.com/apk/res/android" 

□ 

Workout 

4B 


<fragment 

android:name="com.hfad.workout.WorkoutListFragment" 

android:id="@+id/list_frag" 

android:layout_width="Odp" 

android:layout_weight="2" 

android:layout_height="match_parent"/> 


app/src/main 

HB 


i co 

m 

layout-large 


activity_main.xml 


Wyc 9 0m 9 to display -the 

<FrameLayout kT'***/*& '^ide a FrameLayout. 

•SfcftdT’Q- id; i4um o - M c u m. hrud T TJ ui kTTuL . Woik i ^utD c LuilFi , a^frrrefirt- 1J - 


We'll add the trajment 
to the tame layout 
pvoyammati tally- 


android: id="@+id/fragment_container"«r- Wfe'll jive the FrameLayout a* ID 

android: layout_width="Odp" °t trajment iontamer so we dan 

android: layout_weight="3" ' re ^° r ^ 11,1 ow,r activity Code. 


android:layout_height="match_parent"/> 


</LinearLayout> 
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Use layout differences to tell 
which layout the device is using 

We want MainActivity to perform different actions when 
the user clicks on a workout depending on whether the device is 
running on a phone or a tablet. We can tell which version of the 
layout’s being used by checking whether or not the layout includes 
the frame layout we added on the previous page. 

If the app is running on a tablet, the device will be using the version 
of activity_main. xml that’s in the layout-large folder. This layout 
includes a frame layout with an ID of f ragment_container. 
When the user clicks on a workout, we want to display a new 
instance of Workout DetailFragment in the frame layout. 
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\/ 
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If the app’s running on a phone, the device will be using activity _ 
main.xml in the layout folder. This layout doesn’t include the frame 
layout. If the user clicks on a workout, we want MainActivity 
to start DetailActivity as it does currently. 


MaihAdfivi-ty doesn't 

indude the 4Var*e layout_^ 

■*p ii^ ruKhihg Oh a phohe. 


If we can get our MainActivity code to check for the 
existence of a view with an ID of f ragment_container, 
we can get MainActivity to behave differently depending 
on whether the app’s running on a phone or a tablet. 
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MainActivity code 


The revised MainActivity code 

We’ve updated MainActivity so that the itemClicked () 
method looks for a view with an ID of f ragment_ 
container. We can then perform different actions depending 
on whether or not the view is found. 

Here’s our full code for MainActivity.]ava; update your version of 
the code to match ours: 



Create AVD 
Create layout 
Show workout 


package com.hfad.workout; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.content.Intent; 


□ 

Workout 

MB 

app/src/main 

MB 


java 


MB 


com. hfad. workout 
L @ 

MainActivity.java 


public class MainActivity extends AppCompatActivity 

implements WorkoutListFragment.Listener { 

l/Ve've no-t £han<\ed this method- 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

1 6ei a reference bo the tame layout that will to»tam 

WbrkoutDetailfraynent- This will only e*ist -t the app 

@ Over ride IS V un on a device with a larje screen- 

public void itemClicked(long id) { / 

View fragmentContainer = findViewByld(R.id.fragment_container); 
if (fragmentContainer != null) { 

//Add the fragment to the FrameLayout ^ to write CoAt that will run 

J else ^ i-r the -frame layout exists. 

Intent intent - new Intent(this, DetailActivity.class); 
intent.putExtra(DetailActivity.EXTRA_WORKOUT_ID, (int) id); 
startActivity(intent) ; ^ 

} l-C the -fv-ame layout doesn't e*ist, the app must be running 

on a device with a smaller screen- In that case, start 
DetailActivity and pass it the ID ot the workout as betore- 


The next thing we need to do is see how we can add 
WorkoutDetailFragment to the frame layout programmatically. 
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Using fragment transactions 


You can programmatically add a fragment to an activity’s layout so 
long as the activity’s running. All you need is a view group in which 
to place the fragment, such as a frame layout. 

You add, replace, or remove fragments at runtime using a fragment 
transaction. A fragment transaction is a set of changes relating to 
the fragment that you want to apply, all at the same time. 

When you create a fragment transaction, you need to do three things: 


© 

o 

o 


Begin the transaction. 

This tells Android that you’re starting a series of changes that you 
want to record in the transaction. 

Specify the changes. 

These are all the actions you want to group together in the 
transaction. This can include adding, replacing, or removing a 
fragment, updating its data, and adding it to the back stack. 

Commit the transaction. 

This finishes the transaction and applies the changes. 
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\/ 
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1. Pegih the transaction 

You begin the transaction by first getting a reference to the activity’s 
fragment manager. As you may remember from the previous chapter, 
the fragment manager is used to manage any fragments used by 
the activity. If you’re using fragments from the Support Library as 
we are here, you get a reference to the fragment manager using the 

following method: . 

x^-TVis ire-twv-ns -the £va<y»eirv-t manayv -that deals 
getSupportFragmentManager () ; £<T ^ ^e LiWavy. 

Once you have a reference to the fragment manager, you call its 
beginTransaction () method to begin the transaction: 

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); 

A 

That’s all you need to do to begin the transaction. On the next The start ot the 

page we’ll look at how you specify the changes you want to make. ‘pv”d<y*ent transaction 
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transaction changes 


l. Specify the changes 

After beginning the transaction, you need to say what changes the 
transaction should include. 

If you want to add a fragment to your activity’s layout, you call the 
fragment transaction’s add () method. This takes two parameters, 
the resource ID of the view group you want to add the fragment to, 
and the fragment you want to add. The code looks like this: 

WorkoutDetailFragment fragment = new WorkoutDetailFragment();^—' Create “the -fragment* 
transaction. add (R. id. fragment_container, fragment) ; the -fragment to the V\ ew<$roup. 

To replace the fragment, you use the replace () method: 

transaction. replace (R. id. fragment_container, fragment) ; —* Replace -the -fragment 

To remove the fragment completely, you use the remove () 
method: 

transaction. remove (fragment) ; ^ Remove “the -fragment* 


\/ 


Create AVD 
Create layout 
Show workout 


You can optionally use the setTransition () method to say 
what sort of transition animation you want for this transaction: 

transaction. setTransition (transition) ; You don't have to set a transition- 

transition is the type of animation. Options for this are 
TRANSIT_FRAGMENT_CLOSE (a fragment is being removed 
from the stack), TRANSIT_FRAGMENT_OPEN (a fragment is being 
added), TRANSIT_FRAGMENT_FADE (the fragment should fade in 
and out), and TRANSIT_NONE (no animation). By default, there are 
no animations. 

Once you’ve specified all the actions you want to take as part of 
the transaction, you can use the addToBackStack () method 
to add the transaction to the back stack. This method takes one 
parameter, a String name you can use to label the transaction. 

This parameter is needed if you need to programmatically retrieve 
the transaction. Most of the time you won’t need to do this, so you 
can pass in a null value like this: 

transaction. addToBackStack (null) ; ^ — Most o-f the time you won t need to retrieve 

•the tvawadtioh, so ii da* be set to null- 
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3. Commit the transaction 

Finally, you need to commit the transaction. This finishes the 
transaction, and applies the changes you specified. You commit the 
transaction by calling the transaction’s commit () method like this: 

transaction.commit(); 


fragments for larger interfaces 
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That’s everything we need to know in order to create fragment 
transactions, so let’s put it into practice by getting our MainActivity 
code to display an updated version of Workout Detail Fragment 
every time the user clicks on a workout. 



Activity Magnets 


We want to write a new version of the MainActivity's itemClicked () method. It 
needs to change the workout details that are displayed in WorkoutDetailFragment 
each time the user clicks on a new workout. See if you can finish the code below. 


public void itemClicked(long id) { 

View fragmentContainer = findViewByld(R.id.fragment_container); 
if (fragmentContainer != null) { 

WorkoutDetailFragment details = new WorkoutDetailFragment(); 


FragmentTransaction ft = getSupportFragmentManager(). 
details.setWorkout(id); 


ft. 


(R.id.fragment_container , 


ft. 


(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 


ft. 


(null); 


f t. ; 

} else { 

Intent intent = new Intent(this, DetailActivity.classi- 
intent . putExtra (DetailActivity . EXTRA_W0RK0UT_ID, (int) id); 
startActivity(intent) ; 

} 


You woh't heed -to use 

all o-P -the ma^he-ts. 
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Activity Magnets Solution 

We want to write a new version of the MainActivity's itemClicked () method. It 
needs to change the workout details that are displayed in WorkoutDetailFragment 
each time the user clicks on a new workout. See if you can finish the code below. 


public void itemClicked(long id) { 

View fragmentContainer = findViewByld(R.id.fragment_container); 
if (fragmentContainer != null) { 

WorkoutDetailFragment details = new WorkoutDetailFragment(); 


This begins -the 

_ transaction. 


FragmentTransaction ft = getSupportFragmentManager(). 
£aeh tin»e details . setWorkout (id) 

■the user 


(R.id.fragment_container , 




beginTransaction() 


This is a new instance of 
WorkoutDetailFraynent- 
It displays details of the 
workout the user selected- 


(FragmentTransaction.TRANSIT FRAGMENT FADE); 


(null); 


Add -the tradition 
to the back stack. 


Set the tnajment 
to -fade in and out- 


Commit the transaction. 

of it. } else { 

Intent intent = new Intent (this, DetailActivity.classi- 
intent. putExtra (DetailActivity. EXTRA_WORKOUT_ID, (int) id); 
startActivity(intent); 


endTransaction() 


You didn't need to 
use these magnets- 




startTransaction() 
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The updated MainActivity code 
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We’re going to get a new instance of WorkoutDetailFragment 
(one that displays the correct workout), display the fragment in the 
activity, and then add the transaction to the back stack. Here’s the full 
code. Update your version o{ MainActivity.java to reflect our changes: 


package com.hfad.workout; 

import android.support.v4.app.FragmentTransaction; 


VVeVe using a FragmentTransaction 

-from •the Support Libravy as we v-e 
usmj Support Libv-av-y Fv-a^erts. 


public class MainActivity extends AppCompatActivity 

implements WorkoutListFragment.Listener { 


Wc haven't changed this method. 

@Override ^ 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_main); 

} 


□ 

Workout 

H3 

app/sre/main 

L Q 

java_ 

com.hfad. workout 

L @ 

MainActivity.java 


@Override 

public void itemClicked(long id) { 

View fragmentContainer = findViewByld(R.id.fragment_container); 
if (fragmentContainer != null) { 

WorkoutDetailFragment details = new WorkoutDetailFragment(); 

-fragment—^FragmentTransaction ft = getSupportFragmentManager () .beginTransaction () ; 
transaction- details . setWorkout (id) ; 

Add the ft.replace(R.id.fragmen t_container, details); 

transaction ft. setTransition (FragmentTransaction. TRANSIT_FRAGMENT_FADE) ; 

b> the badk —>ft. addToBackStack (null) ; / k_ ^ ^ 0 | d ^ a a meri ^s 

stadk. - 


. Replace the -fragment- 


^ Commit the transaction- 


to -fade in and out- 


ft. commit () ; 

else { 

Intent intent = new Intent(this, DetailActivity.class); 
intent.putExtra(DetailActivity.EXTRA_WORKOUT_ID, (int) id); 
startActivity(intent); 


On the next page we’ll see what happens when the code runs. 
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What happens when the code runs 

Here’s a runthrough of what happens when we run the app. 


v 

v 


© 


The app is launched on a tablet and MainActivity starts. 

WorkoutListFragment is attached to MainActivity, and MainActivity is 
registered as a listener on WorkoutListFragment. 



Tablet 



o 


When an item is clicked in WorkoutListFragment, the fragments 
onListItemClick() method is called. 

This calls MainActivity’s itemClicked () method, passing it the ID of the workout that 
was clicked; in this example, the ID is 1. 



WorkoutList 
Fragment MainActivity 


O 


MainActivity's itemClicked() method sees that the app is running on a tablet. 

It creates a new instance of WorkoutDetailFragment, and begins a new fragment 
transaction. 



FragmentTransaction 
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The story continues... 
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O 


As part of the transaction, WorkoutDetailFragment's views are updated with 
details of the workout that was selected, in this case the one with ID 1. 

The fragment is added to the FrameLayout f ragment_container in 
MainActivity’s layout, and the whole transaction is added to the back stack. 



MainAc+ivi+y 


textTitle: Core Agony 

textDescription: 100 Pull ups 
100 Push-ups 


Workout Detai I Fragment 


100 Sit ups 
100 Squats 


FragmentTransaction 


© 


Main Activity commits the transaction. 

All of the changes specified in the transaction take effect, and the 
WorkoutDetailFragment is displayed next to WorkoutListFragment. 



Let’s take the app for a test drive. 
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Test drive the app 

When we run the app, a list of the workouts appears on the left 
side of the screen. When we click on one of the workouts, details of 
that workout appear on the right. If we click on another workout 
and then click on the Back button, details of the workout we chose 
previously appear on the screen. 


v 

V 


Create AVD 
Create layout 
Show workout 


□ • 


V Q 15:43 

■ 


Workout 




1 

The Limb Loosener 

Core Agony 

The Wimp Special 

Strength and Length 

The rijht side o£ the sdreen 
is empty when you start the 
app, as the user hasr/t chosen 
a workout V^t- 


h_ 


□ • 


V Q 15:44 

Workout 

The Limb Loosener 

The Limb Loosener 


Core Agony 

5 Handstand push-ups 

101-legged squats 

15 Pull-ups 


The Wimp Special 

y T 


Strength and Length 

When the user elieks on the 



Limb Loosener workout* its 
details jet displayed- 



Workout 

The Limb Loosener 

The Wimp Special 


5 Pull-ups 

10 Push-ups 

Core Agony 

15 Squats 

aL . 

The Wimp Special 

T 

Strength and Length 

The user then 


tlidks on -the Mmf 
Special wov-kou-t 
and its details jet 
displayed 



O □ 


The app seems to be working fine as long as 
we don’t rotate the screen. If we change the 
screen orientation, there’s a problem. Let’s 
see what happens. 


< o □ 




Workout 


The Limb Loosener 

The Limb Loosener 

5 Handstand push-ups 

10 1-legged squats 

Core Agony 

15 Pull-ups 

The Wimp Special 


Strength and Length 

When the user didks on the 
Ba^k button, the app joes 
ba£.k to the Limb Loosener 
workout- 


3 o □ 
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Rotating the tablet breaks the app 

When you run the app on a phone and rotate the device, the 
app works as you’d expect. Details of the workout the user 
selected continue to be displayed on the screen: 



But when you run the app on a tablet, there’s a problem. 
Regardless of which workout you’ve chosen, when you rotate the 
device, the app displays details of the first workout in the list: 



Why does the app do this? Give this some thought before 
turning the page. Hint: you saw behavior similar to this 
back in Chapter 4 when we looked at the activity lifecycle. 
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saving state 


Saving an activity's state (revisited) 

When we first looked at the activity lifecycle back in Chapter 4, 
you saw how when you rotate the device, Android destroys and 
recreates the activity. When this happens, local variables used 
by the activity can get lost. To prevent this from happening, 
we saved the state of our local variables in the activity’s 
onSavelnstanceState () method: 

public void onSavelnstanceState(Bundle savedlnstanceState) { 

savedlnstanceState .putlnt ("seconds", seconds) ; Earlier j h book we used 

savedlnstanceState.putBoolean("running", running);^the onSavelnsiaueSiaieO 
} method to save the state ot 

these two variables. 

We then restored the state of the variables in the activity’s 
onCreate () method: 

protected void onCreate(Bundle savedlnstanceState) { 

if (savedlnstanceState !=null) { ^ restored the state 

seconds = savedlnstanceState .getlnt ("seconds") ; -^ ^ variables in the 

running = savedlnstanceState . getBoolean ("running" ); onCreateO method- 

} 

} 


So what does this have to do with our current problem? 


Fragments can lose state too 

If the activity uses a fragment, the fragment 
gets destroyed and recreated along with 
the activity. This means that any local variables 
used by the fragment can also lose their state. 

In our WorkoutDetailFragment code, we 
use a local variable called workout Id to store 
the ID of the workout the user clicks on in the 
WorkoutListFragment list view. When the 
user rotates the device, workout Id loses its 
current value and it’s set to 0 by default. The 
fragment then displays details of the workout with 
an ID of 0—the first workout in the list. 


1/Vhen you rotate the tablet, 
l/VorkoutDetailErajy^ent loses the 
value o( workout Id, and sets it 
badk to its default value o£ O. 


Before After 

workoutId=l /V workoutld=0 



A 


A 


WorkoutDetailFragment 


WorkoutDetailFragment 
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Save the fragment's state... 

You deal with this problem in a fragment in a similar way to how you 
deal with it in an activity. 

You first override the fragment’s onSavelnstanceState () 
method. This method works in a similar way to an activity’s 
onSavelnstanceState () method. It gets called before the 
fragment gets destroyed, and it has one parameter: a Bundle. You 
use the Bundle to save the values of any variables whose state you 
need to keep. 

In our case, we want to save the state of our workout Id variable, so 
we’d use code like this: 

public void onSavelnstanceState(Bundle savedlnstanceState) { 

savedlnstanceState .putLong ("workoutld" , workoutld) ; on£avc|y>S'tandcS*ta‘tcO 

} method jets tailed be-fore 

the -fragment is destroyed- 

Once you’ve saved the state of any variables, you can restore it when 
the fragment is recreated. 

...then use onCreateO to restore the state 

Just like an activity, a fragment has an onCreate () method 
that has one parameter, a Bundle. This is the Bundle to 
which you saved the state of your variables in the fragment’s 
onSavelnstanceState () method, so you can use it to restore 
the state of those variables in your fragment’s onCreate () method. 

In our case, we want to restore the state of the workoutld variable, 
so we can use code like this: 

public void onCreate(Bundle savedlnstanceState){ 

super. onCreate (savedlnstanceState) ; ^ ^ use ^ |s g ur>d | e b> get the 

if (savedlnstanceState != null) { previous s-fca-ie o( ihe wov-kouild variable, 

workoutld = savedlnstanceState.getLong("workoutld"); 

} 

} 

We’ll show you the full code on the next page. 
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The updated code for 
WorkoutPetailFragwent.java 

We’ve updated our code for WorkoutDetailFragment.java to save 
the state of the workout Id variable before the fragment is 
destroyed, and restore it if the fragment is recreated. Here’s our 
code; update your version of WorkoutDetailFragment java to reflect 
our changes. 


package com.hfad.workout; 

import android.support.v4.app.Fragment; 

import android.os.Bundle; 

import android.view.Layoutlnflater; 

import android.view.View; 

import android.view.ViewGroup; 

import android.widget.TextView; 


□ 

Workout 

4B 

app/src/main 

4n 


java_ 


com. hfad. workout 



public class WorkoutDetailFragment extends Fragment { 
private long workoutld; 


WorkoutDetail 

Fragment.java 


@Override “tta oftCv'Cd'tcO r*e*thod- 

public void onCreate(Bundle savedlnstanceState){ 
super.onCreate(savedlnstanceState); 
if (savedlnstanceState != null) { 

workoutld = savedlnstanceState.getLong("workoutld"); 

) 'V 

, •the value o( -the v/ov-kou*bld- 


QOverride 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_workout_detail, container, 

} 


false); 
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WorkoutPetailFragwent.java (continued) 


@Override 

public void onStartO { 
super.onStart(); 

View view = getView(); 
if (view != null) { 

TextView title = (TextView) view.findViewByld(R.id.textTitle); 

Workout workout = Workout.workouts[(int) workoutld]; 
title.setText(workout.getName()); 

TextView description = (TextView) view.findViewByld(R.id.textDescription) , 
description.setText(workout.getDescription()); 

» a 

Workout 

4H 

app/src/main 


£ave the value ot the wovkoutld in the 
saved|nstan£e£tate Bundle betove the tvajment jets 
destroyed- WeVe vetrievinj it in the onCveateO method- 


@Override 

public void onSaveInstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putLong("workoutld", workoutld); 

} 

public void setWorkout(long id) { 
this.workoutld = id; 


java 




com. hfad. workout 

U 


WorkoutDetail 

Fragment.java 


Test drive the app- 

Now, when you run the app on a tablet and rotate the device, details of 
the workout the user selected continue to be displayed on the screen. 


□ • W U 10:47 

Workout 



The Limb Loosener The Wim P S P ecial TT F™ 

\ HMHHH 

10 Push-ups j 

Core Agony 15 Squats / 

T Cl 10:47 


The Wimp Special 
Strength and Length 


When you t\\cV on one of 
•the workouts, its details 
Continue to be displayed 
when you rotate the device- 


The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


The Wimp Special 

5 Pull-ups 
10 Push ups 
15 Squats 
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Your Android Toolbox 

You’ve got Chapter 10 under 
your belt and now you’ve 
added fragments for larger 
interfaces to your toolbox. 


You ta»\ download 

i He -full tode for 
-tHe tHapter from 

/-tinyurUom/ 

HeadPirstAndroid- 



BULLET POINTS 


■ Make apps look different on different 
devices by putting separate layouts in 
device-appropriate folders. 


■ Android keeps track of places you’ve 
visited within an app by adding 
them to the back stack as separate 
transactions. Pressing the Back 
button pops the last transaction off 
the back stack. 


Add, replace, and delete 
fragments using the 

FragmentTransaction 
add (), replace (), and 
remove () methods. 

Add a transaction to the 
back stack using the 

FragmentTransaction 
addToBackStack () method. 


Use a frame layout to add, replace, or 
remove fragments programmatically 
using fragment transactions. 

Begin the transaction by calling 

the FragmentManager 
beginTransaction() 

method. This creates a 

FragmentTransaction 

object. 


Commit a transaction using the 
FragmentTransaction 
commit () method. This applies all 
the updates in the transaction. 

Save the state of a fragment’s 
variables in the Fragment 
onSavelnstanceState() 
method. 

Restore the state of a fragment’s 
variables in the Fragment 
onCreateO method. 
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Nesting Fragments 4 - 


The Back button was 
going crazy, transactions 
everywhere. So I hit them with 
the getChildFragmentManager() 
method and BAM! Everything 
went back to normal. 


So far you’ve seen how to create and use static fragments. 

But what if you want your fragments to be more dynamic? Dynamic fragments have a lot 
in common with dynamic activities, but there are crucial differences you need to be able 
to deal with. In this chapter you’ll see how to convert dynamic activities into working 
dynamic fragments. You’ll find out how to use fragment transactions to help maintain 
your fragment state. Finally, you’ll discover how to nest one fragment inside another, 
and how the child fragment manager helps you control unruly back stack behavior. 
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Adding dynamic fragments 


In Chapters 9 and 10, you saw how to create fragments, how to 
include them in activities, and how to connect them together. To 
do this, we created a list fragment displaying a list of workouts, 
and a fragment displaying details of a single workout. 

These fragments we’ve created so far have both been static. 

Once the fragments are displayed, their contents don’t change. 
We may completely replace the fragment that’s displayed with a 
new instance, but we can’t update the contents of the fragment 
itself. 


In this chapter we’re going to look at how you deal with 
a fragment that’s more dynamic. By this, we mean a 
fragment whose views gets updated after the fragment is 
displayed. To learn how to do, we’re going to change the 
stopwatch activity we created in Chapter 4 into a stopwatch 
fragment. We’re going to add our new stopwatch fragment to 
Workout Detail Fragment so that it’s displayed underneath 
the details of the workout. 


WeVe only showing -the -tabled 


version 


•nly 

ok -the app here, bu-fc -the 
new stopwatch -fragment will 
appear in "the phone version too- 



The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 



WorkoutListFragment 
eon-tains a list ok 
workouts- 


These lines won t appear in the aetual 
app- We*ve added them here to show 
you eaeh ok the -fragments- 


WbrkoutPetailFragment 
displays details ok the 
workout the user dlidks on- 

We re going to add a 
stopwateh -fragment to 
WorkoutPetai (Fragment- 
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Here's what we're going to do 

There are a number of steps we’ll go through to change the 
app to display the stopwatch: 


o 


Convert Stopwatch Activity into StopwatchFragment. 

We’ll take the StopwatchActivity code we created in 
Chapter 4, and change it into fragment code. We’ll also display 
it in a new temporary activity called TempActivity so that 
we can check that it works. We’ll temporarily change the app 
so that TempActivity starts when the app gets launched. 


Q Test StopwatchFragment. 

The StopwatchActivity included Start, Stop, and Reset 
buttons.We need to check that these still work when the 
stopwatch code is in a fragment. 

We also need to test what happens to StopwatchFragment 
when the user rotates the device. 


Q Add StopwatchFragment to WorkoutDetailFragment. 

Once we’re satisfied that StopwatchFragment works, we’ll 
add it to WorkoutDetailFragment. 


N ji □ 14:07 

Workout 



Well start by adding 
StopwatchFragment 
to a new activity 
tailed TempActivity- 


□ • 


▼ Q 11:43 ■ 

Workout 



The Limb Loosener 

The Limb Loosener 

5 Handstand push-ups 


Core Agony 

10 1 -legged squats 

15 Pull-ups 


The Wimp Special 

0:00:00 


Strength and Length 

When we’re satis-fied that 

StopwatchFragment Works 

in TempActivity, we'll add it ST0P 

to WorkoutDetailFragment- reset 


<d o □ 



Let’s get started. We’re going to update the Workout 

app in this chapter, so open your 
original Workout project from 
Chapter 9 in Android Studio. 


you are here ► 
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app structure 

The new version of the app 

We’re going to change our app to get StopwatchFragment 
working in a new temporary activity called TempActivity. This will 
emable us to confirm that StopwatchFragment works before we 
add it to WorkoutDetailFragment later in the chapter. 

Here’s how the new version of the app will work: 



Convert stopwatch 
Test stopwatch 
Add to fragment 


o 


When the app gets launched, it starts TempActivity. 

TempActivity uses activity_temp.xml for its layout, and contains a 
fragment, StopwatchFragment. 


o 


StopwatchFragment displays a stopwatch with Start, Stop, 
and Reset buttons. 



activity_temp.xml fragment 



All of the other activities and fragments we created in Chapters 9 and 
10 will still exist in the project, but we’re not going to do anything with 
them until later in the chapter. 
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Create Temp Activity 



dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


We’ll start by creating TempActivity. Create a new 
empty activity by switching to the Project view of Android 
Studio’s explorer, highlighting the com.hfad.workout package 
in the app/src/main /java folder, going to the File menu and 
choosing New... —Activity—>Empty Activity. Name the activity 

“TempActivity”, name the layout “activity_temp”, make sure l-f prompted -for the 

the package name is com. hf ad. workout, and check the activity s souvte language* 

Backwards Compatibility (AppCompat) checkbox. select the option t a 


We’re going to change our app so that, when it’s launched, it 
starts TempActivity instead of MainActivity. To do 
this, we need to move MainActivity’s launcher intent filter 
to TempActivity instead. Open the file AndroidManifest.xml 
in the app/src/main folder, then make the following changes: 


<?xml version="1.0" encoding="utf-8"?> 

Cmanifest xmlns:android= M http://schemas.android.com/apk/res/android" 
package="com.hfad.workout"> 

Workout 

Application 




Activity android:name=".MainActivity"> 

■ -^int en t - 


app/sre/main 

l</Xmll 

AndroidManifest.xml 


d : n& r r\^~-" ami r 15 i ( . ajz J t i cm . M ffTTT**—4^— 

y . LAUNCHER S 

^<y^rTrrg ii L 

</activity> 

<activity android: name=" . DetailActivity" /> This bit spe£i-Pies 


<activity android:name=".TempActivity"> that it s the main 

<intent-filter> activity of the app. 

<action android:name="android.intent.action.MAIN" /> 

<category android:name="android.intent.category.LAUNCHER" /> 
</intent-filter> 

</activity> This says the activity can 

</application> 


be used to launch the app- 


</manifest> 


We’ll update TempActivity on the next page. 


you are here ► 
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Temp Activity code 


TempActivity needs to extend 
AppCompatActivity 

All of the fragments we’re using in this app come from the 
Support Library. As we said back in Chapter 9, all activities 
that use Support Library fragments must extend the 
FragmentActivity class or one of its subclasses such as 
AppCompatActivity. If they don’t, the code will break. 

All of the other activities we’ve created in this app extend 
AppCompatActivity, so we’ll make TempActivity 
extend this class too. Here’s our code for Temp Activity.java. 
Update your version of the code so that it matches ours below: 



Convert stopwatch 
Test stopwatch 
Add to fragment 


package com.hfad.workout; 


□ 

Workout 


import 

import 

public 


android.support.v7.app.AppCompatActivity; 

android. os . Bundle; -i-, w. ., , 

I he Mtmty extends AppCompatActivity. 

v- 

class TempActivity extends AppCompatActivity { 


app/src/main 




java 


LQ 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_temp); 


com. hfad. workout 



TempActivity.java 


} 


} 


Well add a new stopwatch fragment 

We’re going to add a new stopwatch fragment called 
StopwatchFragment.java that uses a layout called fragment_stopwatch.xml. 
We’re going to base the fragment on the stopwatch activity we created 
back in Chapter 4. 

We already know that activities and fragments behave in similar 
ways, but we also know that a fragment is a distinct type of object—a 
fragment is not a subclass of activity. Is there some way we 
could rewrite that stopwatch activity code so that it works 
like a fragment? 
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Fragments and activities have similar lifecycles... 

To understand how to rewrite an activity as a fragment, we 
need to think a little about the similarities and differences 
between them. If we look at the lifecycles of fragments and 
activities, we’ll see that they’re very similar: 


Lifecycle method 

Activity 

Fragment 

onAttach() 


V 

onCreate() 

V 

V 

onCreateView() 


V 

onActivityCreated() 


V 

onStart() 

V 

V 

onPause() 

V 

V 

onResume() 

V 

V 

onStop () 

V 

V 

onDestroyView() 


V 

onRestart() 

V 


onDestroy() 

V 

V 

onDetach() 


V 


...but the methods are slightly different 

Fragment lifecycle methods are almost the same as activity lifecycle 
methods, but there’s one major difference: activity lifecycle 
methods are protected and fragment lifecycle methods are 
public. And we’ve already seen that the ways that activities and 
fragments create a layout from a layout resource file are different. 

Also, in a fragment, we can’t call methods like f indViewByld () 
directly. Instead, we need to find a reference to a View object, and 
then call the view’s f indViewByld () method. 

With these similarities and differences in mind, it’s time you started 
to write some code... 


you are here ► 
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exercise 



This is the code for StopwatchActivity we wrote earlier. You're going 
to convert this code into a fragment called StopwatchFragment. With 
a pencil, make the changes you need. Keep the following things in mind: 

- Instead of a layout file called activity_stopwatch.xml, it will use a layout 
called fragment_stopwatch.xml. 

- Make sure the access restrictions on the methods are correct. 

- How will you specify the layout? 

-The runTimer () method won't be able to call f indViewByld (), so 
you might want to pass a View object into runTimer (). 


public class StopwatchActivity extends Activity { 

//Number of seconds displayed on the stopwatch. 

private int seconds = 0; ^ -'The number of seconds that have passed 

//Is the stopwatch running? 

private boolean running; « -ru»™g «,ys whether the - |s 

private boolean wasRunning; wasfWmg says whether the stopwatch was rlmiwx 

be+ore the stopwatch was paused. 3 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { A . . , , i .. « 

l-f -the activity was destroyed 

super. onCreate (savedlnstanceState) ; ^ ^ ated restore the 

setContentView (R. layout. activity_stopwatch) ; tate o-P the variables -from 

if (savedlnstanceState != null) { the saved|r.sta«teState Bundle- 

seconds = savedlnstanceState.getlnt("seconds"); 
running = savedlnstanceState.getBoolean("running"); 
wasRunnincr = savedlnstanceState . aetBoolean ("wasRunnincr") ; 


} 

runTimer(); — Start the runTimerO method- 


@Override 

protected void onPause () { <T^Stop the stopwatch i-P the activity is paused- 

super.onPause(); 
wasRunning = running; 
running = false; 

} 
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OOverride 

protected void onResume() 
super.onResume(); 
if (wasRunning) { 
running = true; 


• start the sb^watth the activity is reamed- 


} 




Save -the activity's state be-Pore 
the activity is destroyed- 


@Override 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putInt("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); 
savedlnstanceState.putBoolean("wasRunning", wasRunning); 

} 


public void onClickStart(View view) { 
running = true; 


} 


public void onClickStop(View view) 
running = false; 



} 


public void onClickReset(View view) 
running = false; 
seconds = 0; 


■/ 


Start, stop, or reset the stopwatdh 
depending on whidh button is dlidked- 


} 




Use a Handler to post Code to 
indrement the number ot sedonds and 
update the te*t view every sedond- 


private void runTimer() { 

final TextView timeView = (TextView)findViewByld(R.id.time_view) 
final Handler handler = new Handler(); 
handler.post(new Runnable() { 

@Override 

public void run() { 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; 

int secs = seconds%60; 

String time = String.format(Locale.getDefault(), 

"%d:%02d:%02d", hours, minutes, secs); 
timeView.setText(time) ; 
if (running) { 
seconds++; 

} 

handler.postDelayed(this, 1000); 


} 


} 


you are here ► 
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solution 



This is the code for StopwatchActivity we wrote earlier. You're going 
to convert this code into a fragment called StopwatchFragment. With 
a pencil, make the changes you need. Keep the following things in mind: 

- Instead of a layout file called activity_stopwatch.xml, it will use a layout 
called fragment_stopwatch.xml. 

- Make sure the access restrictions on the methods are correct. 


- How will you specify the layout? 


This is -the new hame. 


V 


-The runTimer () method won't be able to call f indViewByld (), so 
you might want to pass a View object into runTimer (). 


public class StopwatdhFra^ment extends 

//Number of seconds displayed on the stopwatch. ^ 

private int seconds = 0; Were extending 

//Is the stopwatch running? Fragment, not mdtivi y- 

private boolean running; 

private boolean wasRunning; 


@Override ^ TKis "^hod ^ be ^ 

publid void onCreate (Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; , do| ft ^ a jf^ent's layout 

m 0 XrtakO method. 

if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds"); 
running = savedlnstanceState.getBoolean("running"); 
wasRunning = savedlnstanceState.getBoolean("wasRunning"); 

} , k 

WfeVe not Calling v-unTimerO yet because we’ve We can leave -this Code in tbe 

} not set the layout—we don’t have any views yet- onCveateO method- 


^Override We set the -fragment s layout in 

publid V \ew on Create\/iew(Layout|n-flater in-f later, \/iew£jroup dontainer, the onCreate\/iewO method* 
Bundle saved InstandeState) { 

\/iew layout =■ in-flater.in'flatefR.layout-fragment^stopwatdh, dontainer, -false); 

runTimer (layout); <$~Pass the layout view to the runTW) method, 
return layout; 

@Override ^T Th,s mC ^ od * ccd$ bc 

publid void onPause () { 

super.onPause(); 
wasRunning = running; 
running = false; 


} 
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@Override 




This method needs to be public 


SAAZNfc>@ner^e^K fublid void onResume () { 

super.onResume(); 
if (wasRunning) { 
running = true; 


} 

@Override 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putlnt("seconds”, seconds); 
savedlnstanceState.putBoolean("running", running); 
savedlnstanceState.putBoolean("wasRunning", wasRunning); 

} 


public void onClickStart(View view) { 
running = true; 

} 

public void onClickStop(View view) { 
running = false; 

} 


public void onClickReset(View view) { 
running = false; 
seconds = 0; 

The \runTime\rO method now takes a l/iew. 

private void runTimer ( \/iew view ) { 

final TextView timeView = (TextView) view, findViewByld(R.id.time_view); 

final Handler handler = new Handler (); ^ Mse view Parameiev-tall IrndViewByldO. 

handler.post(new Runnable() { 

@Override 

public void run() { 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; 

int secs = seconds%60; 

String time = String.format(Locale.getDefault(), 

"%d:%02d:%02d ", hours, minutes, secs); 
timeView.setText(time) ; 
if (running) { 
seconds+i; 


handler.postDelayed(this, 1000); 

} 


} 


} 


you are here ► 
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StopwatchFragment code 


The StopwatchFragment.java code 


Convert stopwatch 
Test stopwatch 
Add to fragment 


We’ll add StopwatchFragment to our Workout project so that we can use 
it in our app. You do this in the same way you did in Chapter 9. Highlight 
the com.hfad.workout package in the app/src/main /java folder, then go to 
File—>New...—^Fragment—^Fragment (Blank). Give the fragment a name of 

“StopwatchFragment”, give it a layout name of “fragment_stopwatch”, and uncheck |£ pv-ompted -for tbe 
the options for including fragment factory methods and interface callbacks. ^-- -(raiments source lanjuaje, 

When you click on the Finish button, Android Studio creates a new fragment for sclent option *fov Ja a 

you in a file called StopwatchFragment.java in the app/src/main/java folder. Replace 
the fragment code Android Studio gives you with the following code (this is the code 
you updated in the exercise on the previous page): 


package com.hfad.workout; 

import android.os.Bundle; 
import android.os.Handler; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.TextView; 
import java.util.Locale; 


a 

Workout 

app/src/main 

L Q 

java 

MB 

com. hfad .workout 

U 


Stopwatch 

Fragment.java 


public class StopwatchFragment extends Fragment { 

//Number of seconds displayed on the stopwatch. 

private int seconds = 0; ^number ok seconds that have passed 

//Is the stopwatch running? 

private boolean running; ^ -- . 

. . , . „ . rurming says whether the stopwatch is runnina. 

private boolean wasRunmng; a * ^ ^ ^ 

be+ove the stopwatch was paused- 3 

@Override 

public void onCreate(Bundle savedlnstanceState) { 

super .onCreate (savedlnstanceState) ; Restore tbe state ok tbe variables 

if (savedlnstanceState != null) { tbe savedlnstanceState Bundle- 

seconds = savedlnstanceState.getlnt("seconds") ; 
running = savedlnstanceState.getBoolean("running"); 
wasRunning = savedlnstanceState.getBoolean("wasRunning"); 


} 


Tbe Code Continues 
on the *e*t pa^e- 
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StopwatchFragwent.java (continued) 

@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container, 

Bundle savedlnstanceState) { 

View layout = inflater.inflate(R.layout.fragment_stopwatch, container, false); 
runTimer (layout) ; layout a*d start tbe 

return layout; vuftTWrO method, passing in the layout 

} 


Convert stopwatch 
Test stopwatch 
Add to fragment 


@Override 


public void onPause() { 


} 


super.onPause() ; 
wasRunning = running; 
running = false; 


l-P the -Pvagirheht s paused, 
record whether the stopwatch 
was \ruhhihg a^d stop it. 


□ 

Workout 

4H 

app/sre/main 

vs 

java_ 

vs 


@Override 

public void onResume() { 

super.onResume(); 
if (wasRunning) { 

running = true; |.f -the stopwatdh was tunning be-fov-e it 

} was paused, set it tunning again. 


com. hfad .workout 



Stopwatch 

Fragment.java 


} 


@Override 


public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState .putlnt ("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); N 

savedlnstanceState.putBoolean("wasRunning", wasRunning); 


Put the values o-P the 
variables m the Bundle 
be-Pore the activity is 
destroyed. These are 
used when the user 
turhs the deviee- 


public void onClickStart(View view) { 
running = true; 

This tode needs to run when the user 
1 tlitks o* the Start butW 

The tode Continues 
OY\ the ne*t pa$e. 


you are here ► 
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StopwatchFragment.java (continued) 

public void onClickStop(View view) { 

running = false; ^ 

This toAt needs to run when the user 

} clicks on ike siop button- 

public void onClickReset(View view) { 
running = false; "V 

Tnis £ode needs -fco run when •the user 
seconds 0, elieks on -the Resei bui-fcon. 


Convert stopwatch 
Test stopwatch 
Add to fragment 

□ 

Workout 

4H 

app/src/main 

HU 

java 

40 

com. hfad .workout 

U 


private void runTimer(View view) { 

final TextView timeView = (TextView) view.findViewByld(R.id.time_view); 

final Handler handler = new Handler (); „ .. 

'v--- Putting ike Code in a Handler means it 

handler. post (new Runnable () { - m tke background thread- 

OOverride 

public void run() { 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; 

int secs = seconds%60; 

String time = String.format(Locale.getDefault(), 

"%d:%02d:%02d", hours, minutes, secs); 
timeView.setText(time); .p’isplay the number Jc seconds that 

if (running) { 


Stopwatch 

Fragment.java 


} 


kave passed in ike stopwatch- 
econds++; ^ ^ ^pwaick is running, increment tke number of seconds. 


handler.postDelayed(this, 1000); 


}) ; 


Run ike Handler Code every second 


That’s all the Java code we need for our 
StopwatchFragment. The next thing we need to do is say 
what the fragment should look like by updating the layout code 
Android Studio gave us. 
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The StopwatchFragwent layout 

We’ll use the same layout for StopwatchFragment as we 
used in our original Stopwatch app. To do so, replace the 
contents of fragment_stopwatch.xml with the code below: 

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

□ 

Workout 

app/src/main 

LQ 

res __ 

MB 

layout 


dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
android:padding="16dp"> 


<TextView 

android:id="@+id/time_view" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 

android:textAppearance="@android:style/TextAppearance.Large" 
android:textSize="56sp" /> 


fragment_ 
stop watch, xml 


The Start 

bu-fc-fcoh 


<Button 

android:id="@+id/start_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="2 Odp" 
android:onClick="onClickStart" 
android:text="©string/start" /> 

<Button 

android:id="@+id/stop_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="8dp" 
android:onClick="onClickStop" 
android:text="@string/stop" /> 


The number hours, minuses, 
and seconds that have passed- 



The Reset 

button £ode 
is on the 

next page- 


you are here ► 
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layout, continued 


The StopwatchFragment layout (continued) 


<Button 

android:id="@+id/reset_button" 
android:layout_width="wrap_content" 
android:layout_height= n wrap_content M 
android:layout_gravity="center_horizontal 
android:layout_marginTop="8dp" 
android:onClick="onClickReset" 
android:text="@string/reset" /> 

</LinearLayout> 


The Reset button 


Convert stopwatch 
Test stopwatch 
Add to fragment 


The StopwatchFragwent layout uses String values 

The XML code in fragment_stopwatch, xml uses string values for the text on 
the Start, Stop, and Reset buttons. We need to add these to strings.xml : 


<string name="start">Start</string> 
<s tring name="stop">Stop</string> 
<string name="reset">Reset</string> 


These are -the 
button labels. 


The Stopwatch fragment looks just like it did when it was an activity. 
The difference is that we can now use it in other activities and 
fragments. 


□ 

Workout 

]J i3 

app/sre/main 

Lfii 

res 



strings.xml 


The s'bofwa'tcb looks 
•the same as it did 
when it was an activity- 
But betause it's now a 
tvajment, we tan veuse 
it in ditfevent plates. 




0:00:00 

START 

STOP 

RESET 


The next thing we need to do is display it in TempActivity’s layout. 
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Add StopwatchFragment to 
Temp Activity's layout 


Convert stopwatch 
Test stopwatch 
Add to fragment 


The simplest way of adding StopwatchFragment to 
TempActivity’s layout is to use the <f ragment> element. 
Using the <f ragment> element means that we can add the 
fragment directly into the layout instead of writing fragment 
transaction code. 

Here’s our code for activity_temp.xml. Replace the code that’s 
currently in that file with this updated code: 


□ 

Workout 

L o 

app/src/main 


<?xml version="1.0" encoding= M utf-8 M ?> 

<fragment xmlns:android= M http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.StopwatchFragment" 

android: layout_width="match_jparent" ^^This adds -the -(Vag e t 

android: layout_height="match_j?arent"/> to the activity* 


res 


^3 

layout 


activity_ 

temp.xml 


That’s everything we need to see StopwatchFragment 
running. Let’s take it for a test drive. 



Test drive the app- 

When we run the app, TempActivity is displayed. It contains 
StopwatchFragment. The stopwatch is set to 0. 


Mick we run the app, 

Te^pActivity starts, 
not AlainActivity. 
TempActivity displays 
StopwatchFragment as 

expected. 


N 

* □ 14:07 ^ 

Workout 



0:00:00 


START 


STOP 


RESET 


The next thing we’ll do is check that 
StopwatchFragment’s buttons work OK. 


you are here ► 
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what happened? 


Convert stopwatch 
Test stopwatch 
Add to fragment 


The app crashes if you click on a button 


V 


When you click on any one of the buttons in the Workout app’s new 
stopwatch, the app crashes: 


This is what happened —^ 
whch we elieked ok 
the £ta\rt buttoK ik 

Stopwat^hFVagmeKt- 




When we converted the stopwatch activity into a fragment, we didn’t 
change any of the code relating to the buttons. We know this code 
worked great when the stopwatch was in an activity, so why should it 
cause the app to crash in a fragment? 

Here’s the error output from Android Studio. Gan you see what may 
have caused the problem? 


04-13 11:56:43.623 10583-10583/com.hfad.workout E/AndroidRuntime: FATAL EXCEPTION: main 
Process: com.hfad.workout, PID: 10583 

java.lang.IllegalStateException: Could not find method onClickStart(View) in a 
parent or ancestor Context for android:onClick attribute defined on view class 
android.support.v7.widget.AppCompatButton with id ’start_button' 

at android.support.v7.app.AppCompatViewInflater$DeclaredOnClickListener. 

resolveMethod(AppCompatViewInflater.j ava:327) 
at android.support.v7.app.AppCompatViewInflater$DeclaredOnClickListener. 

onClick(AppCompatViewInflater.j ava:284) 
at android.view.View.performClick(View.java:5609) 
at android.view.View$PerformClick.run(View.j ava:222 62) 
at android.os.Handler.handleCallback(Handler.j ava:751) 
at android.os.Handler.dispatchMessage(Handler.java:95) 
at android.os.Looper.loop(Looper.j ava:154) 

at android.app.ActivityThread.main(ActivityThread.java:6077) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller. 
run(Zygotelnit.j ava:865) 

at com.android.internal.os.Zygotelnit.main(Zygotelnit.java:755) 
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dynamic fragments 


let's look at the StopwatcbFragwent layout code 


In the layout code for the StopwatchFragment, we’re binding the 
buttons to methods in the same way that we did for an activity, by 
using the android: onClick attribute to say which method should 
be called when each button is clicked: 


VVeVe using the same layout &>r the 
stopwatch now that it's a fragment 
as we did when it was an activity- 


<?xml version="1.0" encoding="utf-8"?> ^ 

<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 


<Button 

android:id="@+id/start_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="20dp" 
android:onClick="onClickStart" 
android:text="@string/start" /> 

<Button 

android:id="@+id/stop_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="8dp" 
android:onClick="onClickStop" - 


□ 

Workout 

H3 

app/sre/main 

mi 


_ 

m3 

layout 


fragment_ 
stopwatch.xml 


android:text="@string/stop" /> 

<Button 

android:id="@+id/reset_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="8dp" 
android:onClick="onClickReset" 
android:text="@string/reset" /> 

</LinearLayout> 

This worked OK when we were using an activity, so why should we 
have a problem now that we’re using a fragment? 


IVeVe using the android-onClick 
■ attributes in the layout to say 
which methods should be called 
when each button is clicked- 
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use onClick in activities only 


Convert stopwatch 
Test stopwatch 
Add to fragment 


The onClick attribute calls methods 
in the activity, not the fragment 

There’s a big problem with using the android: onClick 
attribute to say which method should be called when a view is 
clicked. The attribute specifies which method should be called 
in the current activity. This is fine when the views are in an 
activity's layout. But when the views are in a fragment , this leads to 
problems. Instead of calling methods in the fragment, Android 
calls methods in the parent activity. If it can’t find the methods in 
this activity, the app crashes. That’s what Android Studio’s error 
message was trying to tell us. 

It’s not just buttons that have this problem. The 
android: onClick attribute can be used with any views that 
are subclasses of the Button class. This includes checkboxes, 
radio buttons, switches, and toggle buttons. 

Now we could move the methods out of the fragment and into 
the activity, but that approach has a major disadvantage. It 
would mean that the fragment is no longer self-contained—if we 
wanted to reuse the fragment in another activity, we’d need to 
include the code in that activity too. Instead, we’ll deal with it in 
the fragment. 





Activity 


How to make button clicks call methods in the fragment 

There are three things you need to do in order to get buttons in a 
fragment to call methods in the fragment instead of the activity: 


© 

© 


Remove references to androichonClick in the fragment layout. 

Buttons attempt to call methods in the activity when the onClick attribute is 


used, so these need to be removed from the fragment layout. 

Optionally, change the onClick method signatures. 

When we created our onClickStart (), onClickStop (), and 
onClickReset () methods, we made them public and gave them a single 
View parameter. This was so they’d get called when the user clicked on a 
button. As we’re no longer using the android: onClick attribute in our 
layout, we can set our methods to private and remove the View parameter. 


This step s optional, but 
it's a <y>od oyyovWty 
to tidy wp owv tode- 


© 


Bind the buttons to methods in the fragment by implementing an 
OnClickListener. 

This will ensure that the right methods are called when the buttons are clicked. 


Let’s do this now in our StopwatchFragment. 
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1. Remove the onClick attributes 
from the fragment's layout 

The first thing we’ll do is remove the android: onClick lines 
of code from the fragment’s layout. This will stop Android from 
trying to call methods in the activity when the buttons are clicked: 

<?xml version-"!.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 


v 


Convert stopwatch 
Test stopwatch 
Add to fragment 


<Button 

android:id="@+id/start_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="20dp" 

android:text="@string/start" /> 

<Button 

android:id="@+id/stop_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="8dp" 

-- 


□ 

Workout 

HU 

app/src/main 

La 


res 


MT3 

layout 


fragment_ 
stopwatch.xml 


android:text="@string/stop" /> 


Remove -the onClick 
attributes -for eaeh o( -the 
buttons m tbe stopwatch 


<Button 

android:id="@+id/reset_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="8dp" 

android:text="@string/reset" /> 

</LinearLayout> 


The next thing we’ll do is tidy up our onClickStart (), 
onClickStop (), and onClickReset () code. 
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make methods private 


Z. Change the onClick... method signatures 

Back in Chapter 4, when we created our onClickStart (), 
onClickStop (), and onClickReset () methods in 
StopwatchActivity, we had to give them a specific method 
signature like this: 



Convert stopwatch 
Test stopwatch 
Add to fragment 


The methods 
had to be 
public. 


public void onClickStart(View view) { 

N V 

The methods had to The methods had to have a single 

have a void return value- parameter o( type V\ ew. 


} 


The methods had to take this form so that they’d respond when 
the user clicked on a button. Behind the scenes, when you use 
the android: onClick attribute, Android looks for a public 
method with a void return value, and with a name that matches 
the method specified in the layout XML. 

Now that our code is in a fragment and we’re no longer using the 
android: onClick attribute in our layout code, we can change 
our method signatures like this: 


Our methods no 
longer need to be 
public, so we dan 
make them private- 


private void onClickStart() { 

V 

I/Ve no longer need the \/iew parameter. 


} 


So let’s update our fragment code. Change the 
onClickStart (),onClickStop (), and 
onClickReset () methods in StopwatchFragment.java to match 
ours: 



private void onClickStart 
running = true; 


□ 


Workout 


Change the 

methods to ^ private void onClickStop 

private. running = false; K RernoVe fte 

} / pavametevs 

private void onClickReset { 

running = false; 
seconds = 0; 


4H 

app/sre/main 

4a 


java 


ms 


com. hfad. workout 

LQ 


Stopwatch 

Fragment.java 
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3. Make the fragment implement OnClickListener 

To make the buttons call methods in StopwatchFragment when 
they are clicked, we’ll make the fragment implement the View. 

OnClickListener interface like this: 

public class StopwatchFragment extends Fragment 


This -tuvr\s the £va<y*eirrt 

in-to an OnClidkListenev. 

'(r 

implements View.OnClickListener { 


} 

This turns StopwatchFragment into a type of View. 

OnClickListener so that it can respond when views are clicked. 

You tell the fragment how to respond to clicks by implementing the 
View. OnClickListener onClick () method. This method gets 
called whenever a view in the fragment is clicked. 

@Override 

public void onClick(View v) { ^-/ou must oven vide the onClidkO 

method in youv -fragment Code- 

} 

The onClick () method has a single View parameter. This is the 
view that the user clicks on. You can use the view’s get Id () method 
to find out which view the user clicked on, and then decide how to react. 


4 



8 




Code Magnets 

See if you can complete the 
StopwatchFragment onClick () 
method. You need to call the 
onClickStart () method when the Start 
button is clicked, the onClickStop () 
method when the Stop button is clicked, and 
the onClickReset () method when the 
Reset button is clicked. 


@0verride 

public void onClick(View v) { 

switch ( ) { 

case R.id.start_button: 
onClickStart(); 

break; 


case 
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Cocte Magnets Solution 

See if you can complete the 
StopwatchFragment onClick () 
method. You need to call the 
onClickStart () method when the Start 
button is clicked, the onClickStop () 
method when the Stop button is clicked, and 
the onClickReset () method when the 
Reset button is clicked. 


QOverride 

public void onClick(View v) { 


switch ( v 1 • | getldw j ) { 

case R.id.start_button: 
onClickStart(); 

break; 


0 


| R. id. stop_button ~j 




onClickStop ~j 

Vow didn't need to 

break; 


10 ; 


case R.id.reset button: 




1 true 1 

_ 


onClickReset | 

|~ true J 

|~ true J 

L 1 

I View I 

} 

i 



O; 


The StopwatchFragment onClickO method 


We need to make a few changes to StopwatchFragment.java ; we’ll show you the 
changes one at a time, then the fully updated code a couple of pages ahead. 

Here’s the code to implement the StopwatchFragment onClick () 
method so that the correct method gets called when each button is clicked: 

@ Override ^ This is the M\tv the user clicked on- 

public void onClick(View v) { 

switch (v.getidO ) { ^-Cheek which i/iew was clicked- 

case R.id.start_button: 

onClickStart () ; ^— |£ -the Start button was dlieked, 
break; 


call the onClickStartO method- 


case R. id. s top_button: 
onClickStop(); 
break; 

case R. id. reset__button: 
onClickReset(); 
break; 


\( the Stop button was dieked, 
^all the onCliekStopO method. 

- |*P the Reset button was elieked, 
tall tbe onClidkResetO method- 


□ 

Workout 

4H 

app/sre/main 

vs 


java_ 

vs 

com.hfad.workout 

L @ 

Stopwatch 

Fragment.java 


} 

There’s just one more thing we need to do to get our buttons working: 
attach the listener to the buttons in the fragment. 
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Attach the OnClickListener to the buttons 


To make views respond to clicks, you need to call 
each view’s setOnClickListener () method. 

The setOnClickListener () method takes an 
OnClickListener object as a parameter. Because 
StopwatchFragment implements the OnClickListener 
interface, we can use the keyword this to pass the fragment as 
the OnClickListener in the setOnClickListener () 
method. 


V/ 


Convert stopwatch 
Test stopwatch 
Add to fragment 


As an example, here’s how you attach the OnClickListener 
to the Start button: 


3 ve-fev'ende *to *tbe button- 


Button startButton = (Button) layout.findViewByld(R.id.start_button); 

startButton. setOnClickListener (this) ; m,. L i, >. » 

x “ttadh the listener to the button. 


The call to each view’s setOnClickListener () method 
needs to be made after the fragment’s views have been created. 
This means they need to go in the StopwatchFragment 
onCreateView () method like this: 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

View layout = inflater.inflate(R.layout.fragment_stopwatch, container, false); 
runTimer(layout); 

Button startButton = (Button)layout.findViewByld(R.id.start_button); 
startButton.setOnClickListener(this); 

Button stopButton = (Button)layout.findViewByld(R.id.stop_button); 
stopButton.setOnClickListener(this); 

Button resetButton = (Button)layout.findViewByld(R.id.reset_button); 


resetButton.setOnClickListener(this); 

return layout; ^ 


} 


This attadhes the listener to eadh of the buttons. 


□ 

Workout 


We’ll show you the full StopwatchFragment code on the next 
page. 


4H 

app/src/main 

HD 


java 


m3 


com. hfad .workout 

L @ 

Stopwatch 

Fragment.java 
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StopwatchFragment code 


V 


The StopwatchFragment code 

Here’s the revised code for StopwatchFragment.javo ; update your 
version to match ours: 


package com.hfad.workout; 

import java.util.Locale; 

import android.os.Bundle; 

import android.os.Handler; 

import android.support.v4.app.Fragment; 

import android.view.Layoutlnflater; 

import android.view.View; 

import android.view.ViewGroup; 

import android.widget.TextView; 

import android.widget.Button;^-"Were us'mj 


Convert stopwatch 
Test stopwatch 
Add to fragment 


□ 

Workout 

L Q 

app/sre/main 

java 

03 

com. hfad. workout 

L @ 

Stopwatch 

ihe MU class, so we’ll it Fragment.java 


public class StopwatchFragment extends Fragment implements View.OnClickListener { 
//Number of seconds displayed on the stopwatch. 

private int seconds = 0; The ^-a^ment needs t> implement 

//Is the stopwatch running? the |/ie\w.0nClidkListener interfate. 

private boolean running; 
private boolean wasRunning; } 

Wc Yt hot £tahgihg the ohCveateO method. 




@Override 

public void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
if (savedlnstanceState != null) { 

seconds = savedlnstanceState.getlnt("seconds"); 
running = savedlnstanceState.getBoolean("running"); 
wasRunning = savedlnstanceState.getBoolean("wasRunning"); 


} 


Update the onOeateViewO method to 
attath the listener to the buttons. 


QOverride 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

View layout = inflater.inflate(R.layout.fragment_stopwatch, container, false), 
runTimer(layout); 

Button startButton = (Button)layout.findViewByld(R.id.start_button); 
startButton.setOnClickListener(this); 

Button stopButton = (Button)layout.findViewByld(R.id.stop_button); 
stopButton.setOnClickListener(this); 

Button resetButton = (Button)layout.findViewByld(R.id.reset_button); 
resetButton.setOnClickListener(this); 

return layout; The dode dontmues ' 

, on -the ne*t pay. 
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The StopwatchFragwent code (continued) 


dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


QOverride 

public void onClick(View v) { ^ 
switch (v.getld()) { 

case R.id.start_button: 
onClickStart(); 
break; 

case R.id.stop_button: 
onClickStop(); 
break; 

case R.id.reset_button: 
onClickReset(); 
break; 



weVe implementing the 
OnClickListenev- m-tev-fade, we need 
•to override "the onClickO method' 


Call the appropriate method 
m the tvagrnent (or the 
button that was clicked 


} 


> 


QOverride 

public void onPause() { 

super.onPause(); 
wasRunning = running 
running = false; 


QOverride 

public void onResume() { 

super.onResume(); 
if (wasRunning) { 
running = true; 



□ 

out 

4Hi 


Workout 


VVc'vc not thanked these methods. 


app/sre/main 

La 

java_ 

-m 

com. hfad. workout 

L @ 

Stopwatch 

Fragment.java 


} 


QOverride 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putInt("seconds", seconds); 
savedlnstanceState.putBoolean("running", running); 
savedlnstanceState.putBoolean("wasRunning", wasRunning); 


The Code Continues 
on the next pay. 
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code, continued 


The StopwatchFragment code (continued) 



Convert stopwatch 
Test stopwatch 
Add to fragment 


private void onClickStart() 

running = true; 

} 

private void onClickStop() 

running = false; 

} 

private void onClickReset() 



l/Ve ve thawed these methods 
so they're private- We've also 
removed the View parameter, 
as we no longer needed it- 


running = false; 


seconds = 0; 


a 

Workout 

KJ 

app/sre/main 

MB 

java_ 

mu 

com. hfad .workout 



Stopwatch 

Fragment.java 


} 



not changed this method- 


private void runTimer(View view) { 

final TextView timeView = (TextView) view.findViewByld(R.id.time 
final Handler handler = new Handler(); 
handler.post(new Runnable() { 

@Override 

public void run() { 

int hours = seconds/3600; 

int minutes = (seconds%3600)/60; 

int secs = seconds%60; 

String time = String.format(Locale.getDefault() , 

”%d:%02d:%02d", hours, minutes, secs); 
timeView.setText(time); 
if (running) { 
seconds++; 


view); 


} 



handler.postDelayed(this, 1000); 


Those are all the code changes needed for StopwatchFragment.java. 
Let’s see what happens when we run the app. 
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Test drive the app 

When we run the app, the stopwatch is displayed as before. 
This time, however, the Start, Stop, and Reset buttons work. 



dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


N 

^ 2fi U 11:56 1 

Workout 



r 

When we 
start -the 
app, the 
stopwatch 
is set to O. 


0:00:00 


START 


STOP 


RESET 


h 


N 

^ u 11:57 1 

Workout 



0:00:04 


h 


Men we 
dl*.dk on 

-the Start' 
and Stop- 

buttons, 

tbe 

stopwatdh 
starts and 

stops. 



N 

W % Q 11:58 ^ 

START 

Workout 



STOP 


RESET 



0:00:00 


Men we 
dlidk on 

the Reset 

button, the 
stopwatdh 

is reset-- 

badk to O. 




START 


STOP 


RESET 



Now that we’ve got the buttons working, the next thing we 
need to test is what happens when we rotate the device. 
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rotate device 


Rotating the device resets the stopwatch 

There’s still one more problem we need to sort out. When we 
rotate our device, the stopwatch gets reset back to 0. 



Convert stopwatch 
Test stopwatch 
Add to fragment 



We encountered a similar problem when we first 
created StopwatchActivity back in Chapter 4. 
StopwatchActivity lost the state of any instance variables 
when it was rotated because activities are destroyed and 
recreated when the device is rotated. We solved this problem by 
saving and restoring the state of any instance variables used by 
the stopwatch. 

This time, the problem isn’t due to the code in 
StopwatchFragment. Instead, it’s because of how we’re 
adding StopwatchFragment to TempActivity. 
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Use <fragment> for static fragments... 

When we added StopwatchFragment to TempActivity, 
we did it by adding a <f ragment> element to its layout like 
this: 


v 


Convert stopwatch 
Test stopwatch 
Add to fragment 


<?xml version="l.0" encoding="utf-8"?> 

<fragment xmlns:android="http://schemas.android.com/apk/res/android" 
android:name="com.hfad.workout.StopwatchFragment" □ 

android:layout_width="match_parent" Workout 

android:layout_height="match_parent"/> 

We did this because it was the simplest way to display our 
fragment in an activity and see it working. 

As we said back in Chapter 9, the <f ragment> element is a 
placeholder for where the fragment’s layout should be inserted. 

When Android creates the activity’s layout, it replaces the 
<f ragment> element with the fragment’s user interface. 

When you rotate the device, Android recreates the activity. If 
your activity contains a <f ragment> element, it reinserts a 
new version of the fragment each time the activity is recreated. The old 
fragment is discarded, and any instance variables are set back 
to their original values. In this particular example, this means 
that the stopwatch is set back to 0. 

...but dynamic fragments need a fragment transaction 

The <f ragment> element works well for fragments that 
display static data. If you have a fragment that’s dynamic, like 
our stopwatch, you need to add the fragment using a fragment 
transaction instead. 

We’re going to change TempActivity so that we no longer 
display StopwatchFragment using a <f ragmentX 
Instead, we’ll use a fragment transaction. To do this, we need 
to make changes to activity_temp.xml and TempActivity.java. 


4B 

app/src/main 

MB 

res 

MB 

layout 


activity_ 

temp.xml 
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frame layout 


Change activity_temp.xml 
to use a Framelayout 

As you learned back in Chapter 10, when you want to add a 
fragment to an activity using a fragment transaction, you first 
need to add a placeholder for the fragment in the activity’s layout. 
We did this in Chapter 10 by adding a frame layout to the layout, 
and giving it an ID so we could refer to it in our Java code. 

We need to do the same thing with activity_temp.xml. We’ll replace 
the <f ragment> element with a frame layout, and give the 
frame layout an ID of stopwatch_container. Update your 
version of activity_temp.xml so that it reflects ours: 

<?xml version="1.0" encoding= M utf-8"?> 


v 


Convert stopwatch 
Test stopwatch 
Add to fragment 


□ 

Workout 

4H 

app/src/main 


activity_ 

temp.xml 



lihc. 


FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 

Replace -the cem; hf Delete "this lin 

-Pvagmeirt android: id=" @+id/stopwatch_container " 

^ android:layout_width="match_parent" 

* V" dr*eL-ayout* 

' android:layout_height="match_parent"/> 


Add a fragment transaction to Temp Activity .java 

Once you’ve added the frame layout to your activity’s layout, 
you can create the fragment transaction that will add the 
fragment to the frame layout. 

We want to add StopwatchFragment to TempActivity 
as soon as TempActivity gets created. We only want to add 
a new fragment, however, if one hasn’t previously been added 
to it. We don’t want to override any existing fragment. 

To do this, we’ll add code to TempActivity’s onCreate () 
method that checks whether the savedlnstanceState 
Bundle parameter is null. 

If savedlnstanceState is null, this means that 
TempActivity is being created for the first time. In that case, 
we need to add StopwatchFragment to the activity. 

If savedlnstanceState is not null, that means that 
TempActivity is being recreated after having been 
destroyed. In that situation, we don’t want to add a new 
instance of StopwatchFragment to the activity, as it would 
overwrite an existing fragment. 
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Pda] pi izz}& 

Your job is to take code snippets from 
the pool and place them into the 
blank lines in Temp Activity.]ava. 
You may not use the same code 
snippet more than once, and you 
won't need to use all the code 
snippets. Your goal is to create a 
fragment transaction that will add 
an instance of StopwatchFragment 
to TempActivity. 


□ 

Workout 

L Q 

app/src/main 

L a 

java_ 

com. hfad. workout 


QOverride 


TempActivity.java 


protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_temp); 
if (savedlnstanceState == null) { 

StopwatchFragment stopwatch = new StopwatchFragment(); 
FragmentTransaction ft = 

ft.add(R.id.stopwatch_container, ); 

ft..(null) ; 

ft.setTransition(FragmentTransaction.TRAN SIT_FRAGMENT_FADE); 
ft. ; 


} 


Note: each snippet 
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Pda] plizzjc ^ajuflan 

Your job is to take code snippets from 
the pool and place them into the 
blank lines in Temp Activity.]ava. 

You may not use the same code 
snippet more than once, and you 
won't need to use all the code 
snippets. Your goal is to create a 
fragment transaction that will add 
an instance of StopwatchFragment 
to TempActivity. 


a 

Workout 

4■ 

app/src/main 

L Q 

java 

MB 

com.hfad. workout 

U 


TempActivity.java 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_temp); 
if (savedlnstanceState == null) { 

StopwatchFragment stopwatch = new StopwatchFragment(); 


This begins the -(Varment 
'bransaetiott. We need to vse 

jetSuffov-tFv-a^mchtAla^ajev-O, *ot 

ActFvaamcntManayrO, as v/eVe usi^ 
?v-a<\ments -fv-om the Support Library- 

i 


Add the FragmentTransaction ft = getSupportFragmentManagerO . beginTransaction() 

transaction ft. add (R. id. stopwatch_container, stopwatch 

to the back —^ft.addT^ ; ^— S to TempActivity s layout- 

stack. 


.^ ; Add an ins-fcanee ot StopwatchFragment 

to TempActivity^ layout. 


ft.setTransition(FragmentTransaction.TRAN SIT_FRAGMENT_FADE); 

ft. commitO 


Commrt Ihe t\r3ir,sadW- 
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The full code for TempActivity-java 


We’ve added a fragment transaction to Temp Activity.java that 
adds StopwatchFragment to TempActivity. Our full 
code is below. Update your version of TempActivity.java so that it 
matches ours. 

you need to 'import the 
FragmentTransaction class 
^ -from ■the Support Libvavy. 

(S4 


package com.hfad.workout; 


import android.support.v4.app.FragmentTransaction; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 


public class TempActivity extends AppCompatActivity { 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 



dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


□ 

Workout 

L o 

app/src/main 

MB 


java_ 


com. hfad. workout 



TempActivity.java 


I/Ve only want 
to add the 
-fragment i-P the 
activity isn't 
being recreated 
a-fter having 
been destroyed. 


super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_temp); 

if (savedlnstanceState == null) { 

StopwatchFragment stopwatch = new StopwatchFragment(); 




Bej in the 
-fragment 
transaction. 


FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 
ft. add (R. id. s topwatch_container, stopwatch) ; <7- /\ad the stopwatch, and add the 
ft. addToBackS tack (null) ; “ -transaction to the back stack, 

ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 
ft.commit(); 

/N Set the -fragment transition 

-the ^ ^ a( j e m a*d out 

transaction- This 
applies the changes. 


Those are all the code changes we need to add 
StopwatchFragment to TempActivity using a fragment 
transaction. Let’s see what happens when we run the code. 
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Test drive the app 

When we run the app, the stopwatch is displayed as before. 
The Start, Stop, and Reset buttons all work, and when we 
rotate the app, the stopwatch keeps running. 


v 

-Hv 


Convert stopwatch 
Test stopwatch 
Add to fragment 



At the beginning of the chapter, we said we’d first focus on 
getting StopwatchFragment working in a new temporary 
activity so that we could confirm it works OK. Now that we’ve 
achieved that, we can reuse it in WorkoutDetailFragment. 
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dynamic fragments 


Add the stopwatch to WorkoutDetailFragment 

We’re going to add StopwatchFragment to 
Workout Detail Fragment so that a stopwatch is displayed 
underneath details of the workout. The stopwatch will appear along 
with the workout details whenever the user chooses one of the workouts. 


□ • 

Workout 



# L 11:42 

The Limb Loosener 

Core Agony 

The Wimp Special 

5 Pull-ups 

10 Push-ups 

15 Squats 

As 



The Wimp Special 

Strength and Length 

T 

l/Vhen the user 
dicks on a Y/orkout, 

0:00:00 



'V 

Wovkou'tLis'bFvaojmc^'b 
Contains a list of 
Y/orkouts- 


l/VorkoutDetailFragment 

is displayed. This shoY/s 
details of the Y/orkout- 


1 /VeVe going to add 
StopY/atchFragment to 
WorkoutDetailFragment 

so a stopwatch is 
displayed underneath 
the Y/orkout details. 



Here’s how the app will work: 


o 

o 


When the app gets launched, it starts MainActivity. 

MainActivity includes WorkoutListFragment, which 
displays a list of workouts. 

The user clicks on a workout and WorkoutDetailFragment is displayed. 

WorkoutDetailFragment displays details of the workout, and contains 
StopwatchFragment. 


o 


StopwatchFragment displays a stopwatch. 



Device Fragment .java 


We've sir* plif ied the 
app structure here, but 
these are the key points. 

-A 

Stopwatch 
Fragment.java 


WorkoutDetail 

Fragment.java 


We’ll go through the steps on the next page. 
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steps 


Convert stopwatch 
Test stopwatch 
Add to fragment 


What we're going to do 

There are just a couple of steps we need to go through in 
order to get the new version of the app up and running. 


V 


O 

© 


Make the app start MainActivity when it launches. 

Earlier in the chapter, we temporarily changed the app so that it would 
start TempActivity. We need to change the app so that it starts 
MainActivity again. 

Add StopwatchFragment to WorkoutDetai I Fragment. 

We’ll do this using a fragment transaction. 


Let’s get started. 


Start MainActivity when the app launches 

Earlier in the chapter, we updated AndroidManifest.xml to make 
the app start TempActivity. This was so that we could 
get StopwatchFragment working before adding it to 
WorkoutDetailFragment. 


Now that StopwatchFragment is working, we need to 
start MainActivity again when the app launches. To do 
this, update AndroidManifest.xml with the following changes: 


Application 


Activity android:name=".MainActivity"> 

<intent-filter> 


□ 


Workout 



AndroidManifest.xml 


Action android:name="android.intent.action.MAIN" /> 

<category android:name="android.intent.category.LAUNCHER" /> 
</intent-filter> 

</activity> Add a* intent -Pil-tev t© 

Activity android:name=".DetailActivity" /> stavt Ma'mAd-tiviiy 'whe* 

<activity android:name=" .TempActivity"> •the a^f is launthed- 

- rii iLc T T t 1 n T fcer» - 

= "arldlord7rtrbeft t^ a j &ti o T r. MAlh " ^ 7 ^*— 


Filter^ . 

</activity> 

</application> 


Remove s e intent -filter 

-Prom TempActivity. 
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dynamic fragments 


Add a FraweLayout where the 
fragment should appear 

Next we need to add StopwatchFragment to 
Workout Detail Fragment. We’ll do this by adding 
a frame layout to fragment_workout_detail.xml, just as 
we did in activity_temp.xml. We’ll then be able to add 
StopwatchFragment to WorkoutDetailFragment 
using a fragment transaction. 

Here’s our code for fragment_workout_detail.xml; update your 
code so that it matches ours: 


\/ Convert stopwatch 
~ Test stopwatch 
Add to fragment 


<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android 
android:layout_height= n match_parent" 
android:layout_width="match_parent" 
android:orientation="vertical"> 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:textAppearance="?android:attr/textAppearanceLarge" 
android:id="0+id/textTitle" /> 

workout title 

<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/textDescription" /> 


□ 

Workout 

HU 

app/sre/main 

MB 


res 


KU 

layout 


frag men t_ 
wo rko u t_d eta i I. xm I 


The workout 
description 




Core Agony 

100 Pull-ups 
100 Push-ups 
100 Sit-ups 
00 Squats 


<FrameLayout 

android:id= M @+id/stopwatch_container" — 
android:layout_width="match_jparent" 
android:layout_height="match_j?arent" /> 

</LinearLayout> 

All that’s left to do is to add the fragment transaction to 
WorkoutDetailFragment. 




This is -the Fv-ameLayowi 
we'll ywt the tv-a^meni in- 
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fragment transactions 


Convert stopwatch 
Test stopwatch 
Add to fragment 


So far, we've only used fragment 
transactions in activities 


V 


Earlier in the chapter, we added the following code to 
TempActivity to add StopwatchFragment to its layout: 


protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_temp); 

if (savedlnstanceState == null) { 


This dode adds 

bo TempA^vi-ty when 

TempA^Wity is seated- 



StopwatchFragment stopwatch = new StopwatchFragment(); 


FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 


ft.add(R.id.stopwatch_container, stopwatch); 
ft.addToBackStack(null); 


ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 


ft.commit(); 

} 

} 

The above code worked well when we wanted to add 
StopwatchFragment to an activity. How will it need to 
change now that we want to add StopwatchFragment to a 
fragment ? 

Using fragment transactions in fragments 
uses most of the same code 


□ 

Workout 

4 » 

app/sre/main 

1 ■ 

java_ 

MB 

com. hfad .workout 

L|3 


TempActivity.java 


The good news is that you can use nearly all of the same code 
when you want to use a fragment transaction inside a fragment. 
There’s just one key difference: fragments don’t have a method 
called getSupportFragmentManager (), so we need to 
edit this line of code: 


FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 

In order to create the fragment transaction, we need to get a 
reference to a fragment manager. Fragments have two methods 
you can use for this purpose: getFragmentManager () and 
getChildFragmentManager (). So what’s the difference 
between these two methods, and which one should we use in 
our app? 
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dynamic fragments 


Using getFragmentManager^ creates 
extra transactions on the back stack 


Convert stopwatch 
Test stopwatch 
Add to fragment 


The getFragmentManager () method gets the fragment manager 
associated with the fragment’s parent activity. Any fragment transaction 
you create using this fragment manager is added to the back stack as a 
separate transaction. 


In our case, when someone clicks on a workout, we want the app to 
display the details of the workout and the stopwatch. MainActivity 
creates a transaction that displays Workout Detail Fragment. If 
we use getFragmentManager () to create a transaction to display 
StopwatchFragment, this will be added to the back stack as a 
separate transaction. 

The problem with using two transactions to display the workout and 
stopwatch is what happens when the user presses the Back button. 

Suppose the user clicks on a workout. Details of the workout will be 
displayed, along with the stopwatch. If the user then clicks on the Back 
button, they will expect the screen to go back to how it looked before 
they selected a workout. But the Back button simply pops the 
last transaction on the back stack. That means if we create two 
transactions to add the workout detail and the stopwatch, when the 
user clicks the Back button, only the stopwatch will be removed. They 
have to click the Back button again to remove the workout details. 


a f 

▼ C 10:39 

i 


Workout 




The Limb Loosener 

Core Agony 

The Wimp Special 

5 Pull-ups 

10 Push-ups 

15 Squats 

L 

The Wimp Special 

Strength and Length 

0:00:00 

1 i_£ 


Stopwatch 


Workout Deta 


us 


7 

A transadtion -for S 
l/VorkoutDetailFra<y»ent is added to 
the badk stadk, -followed by a separate 
transadtion -for £toPwatdhrra<\ment 



StopwatdhFragment ■tv-ansae-tion is popped 
o£f the badk stadk. The transadtion -for 
WorkoutDetailFragment stays on the badk stadk. 


Tbe user bas to dlidk tbe Badk button 
twide to $et badk to where they 
started. Clidkin^ the Badk button 
onde only removes the stopwatdlv 



The Wimp Special 


Clearly this behavior is less than ideal. So what about 
getChildFragmentManager() ? 


Strength and Length 
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getChildFragmentManagerQ 


Using getChildFragmentManagerO 
creates nested transactions instead 



Convert stopwatch 
Test stopwatch 
Add to fragment 


The getChildFragmentManager () method gets the 
fragment manager associated with the fragment’s parent fragment. 
Any fragment transaction you create using this fragment 
manager is added to the back stack inside the parent fragment 
transaction, not as a separate transaction. 

In our particular case, this means that the fragment transaction 
that displays WorkoutDetailFragment contains a second 
transaction that displays StopwatchFragment. 

The transaction -to add 
S-topwa-fcchFiragirnen-t is nested 
'Wide -the transaction to add —4 

WorkoutDetailFragment- ^ Wovkouf Dcfai 


I display workout 
details, and I also 
display the stopwatch. 


pwatch 


WorkoutDetailFragment and StopwatchFragment 
are still displayed when the user clicks on a workout, but the 
behavior is different when the user clicks on the Back button. As 
the two transactions are nested, both transactions are popped 
off the back stack when the user presses the Back button. The 
workout details and the stopwatch are both removed if the user 
presses the Back button once. That’s what we want, so we’ll use 
this method in our app. 


a • 

*9 Q 10:39 | 

Workout 



This -time -the user has -to press 
■the Back button just onCe to 
undo both -the workout detail 
and stopwatch transactions. 


The Limb Loosener 

The Wimp Special 

J _ T _ V- _ 


a • 

* Q 10:40 | 

5 Pull-ups 

10 Push-ups 

Core Agony 

15 Squats 

Workout 


The Wimp Special 

Strength and Length 

0 : 00:00 

START 

STOP 

The Limb Loosener 

Core Agony 

The Wimp Special 

Strength and Length 
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What getChildFragwentManagerd 
fragment transaction code looks like 

We’ve written code that will add StopwatchFragment 
to WorkoutDetailFragment. It creates a fragment 
transaction using the fragment manager returned by 
getChildFragmentManager (). Here’s the code: 


public void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 


dynamic fragments 


v 

v 


Convert stopwatch 
Test stopwatch 
Add to fragment 


a 

Workout 

HH 

app/src/main 

L a 

java 

LQ 

com. hfad. workout 


if (savedlnstanceState == null) { 

StopwatchFragment stopwatch = new StopwatchFragment(); 


WorkoutDetail 

Fragment.java 


FragmentTransaction ft = getChildFragmentManager().beginTransaction(); 
ft. add (R. id. stopwatch_container, stopwatch) ; ^ WiVe wsma 

ft.addToBackStack(null) ; instead o+ getSuppov^Fv-agmen-fc/Planajev-O. 

ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); Apart -from that, the 

ft. commit () ; f OC j e ,S sa "' e as we 

had earlier. 

} else { 


workoutld = 


savedlnstanceState.getLong("workoutld"); 


We need to add this code to WorkoutDetailFragment.java. We’ll show 
you the full code on the next page. 

there-, Eire no 

- Dumb Questions 


% I can see that the child fragment manager handles the 
case where I put one fragment inside another. But what if I put 
one fragment inside another, inside another, inside another...? 


The transactions will all be nested within each other, leaving 
just a single transaction at the activity level. So the nested set of 
child transactions will be undone by a single Back button click. 


Fragments seem more complicated than activities. 
Should I use fragments in my apps? 

That depends on your app and what you want to achieve. One 
of the major benefits of using fragments is that you can use them 
to support a wide range of different screen sizes. You can, say, 
choose to display fragments side by side on tablets and on separate 
screens on smaller devices. You’ll also see in the next chapter that 
some Ul designs require you to use fragments. 
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WorkoutDetailFragment code 


The full WorkoutPetailFragwent.java code 

Here’s the full code for WorkoutDetailFragment.java. Update 
your version of the code to include our changes. 


v 

v 


Convert stopwatch 
Test stopwatch 
Add to fragment 


package com.hfad.workout; 


You need to import the 
FragmentTransaction class 
^ -from the Support Library. 

import android.support.v4.app.Fragment; 

import android.support.v4.app.FragmentTransaction; 

import android.os.Bundle; 
import android.view.Layoutlnflater; 

VVUI I 

import android.view.View; | p—j 

import android.view.ViewGroup; , , 

^ ^ app/src/main 

import android.widget.TextView; L D 

java 

public class WorkoutDetailFragment extends Fragment { 
private long workoutld; 


□ 

Workout 


KU 


com. hfad. workout 

U 


QOverride 

public void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 

—K- ^— Delete this line* 


WorkoutDetail 

Fragment.java 


We only want 
to add the 
-fragment i-f the 
activity isn^t 
being recreated 
3-fter having 
been destroyed. 


Begin the 

if (savedlnstanceState == null) { -fragment 

/ - transaction. 

StopwatchFragment stopwatch = new StopwatchFragment(); .A 

FragmentTransaction ft = getChildFragmentManager().beginTransaction(); 

ft. add (R. id. stopwatch_container, stopwatch) ; ^ ^ stopwatch, and add the 

ft. addToBackStack (null) ; ^---* transaction to the back stack. 


ft. setTransition (FragmentTransaction. TRANSIT_FRAGMENT_FADE) ; 

ft. commit 0; Commit the WaeW ^ p 

} else { Set the tvajment 

workoutld = savedlnstanceState . getLong ("workoutld") ; transition to -fade 
j in and out- 


The Code Continues 
on the ne*t pa$e. 
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The full code (continued) 



dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_workout_detail, container, false); 


Wc didn't fchany dny 

•the methods oy\ this 


QOverride 

public void onStartO { 
super.onStart(); 

View view = getView(); 
if (view != null) { 

TextView title = (TextView) view.findViewByld(R.id.textTitle); 

Workout workout = Workout.workouts[(int) workoutld]; 
title.setText(workout.getName()); 

TextView description = (TextView) view.findViewByld(R.id.textDescription) , 
description.setText(workout.getDescription()); 


} 


□ 

Workout 




QOverride 

public void onSavelnstanceState(Bundle savedlnstanceState) { 
savedlnstanceState.putLong("workoutld", workoutld); 


public void setWorkout(long id) { 
this.workoutld = id; 


app/src/main 

mb 

java_ 

MB 

com. hfad. workout 

LQ 


WorkoutDetail 

Fragment.java 


} 

That’s everything we need for our app. Let’s take it for a test 
drive and check that it works OK. 
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test drive 


iTf; '"O 

Test drive the app 

We’ll start by testing the app on a tablet. 


V 

V 

-H3 


Convert stopwatch 
Test stopwatch 
Add to fragment 


When we start the app, MainActivity is displayed. 


Md'vnMh ivi-fcy _ 
starts whch we 
lauhdh the app. 



When we click on one of the workouts, details of that 
workout are displayed along with a stopwatch. If we click on 
a second workout and then click on the Back button, details 
of the first workout are displayed. 










Test drive (continued) 


V 

V 

-►y 


dynamic fragments 

Convert stopwatch 
Test stopwatch 
Add to fragment 


click on the stopwatch buttons, they all work as expected, 
rotate the app, the stopwatch maintains its state. 




* Q 11:44 

h 


\ The Wimp Special 

/ 5 Pull-ups 

\ 10 Push-ups 

/ 15 Squats 

0 * 

Workout 


* Q 11:44 1 


The s-bopwa-bth 
starts running 
vs/Kcn we c\\ck on 
the Start button. 


0:00:05 


START 


STOP 


RESET 


The Limb Loosener 
Core Agony 
The Wimp Special 
Strength and Length 


The Wimp Special 

5 Pull-ups 
10 Push-ups 
15 Squats 


When you rotate -the 
device, the stopwatch 
keeps running. 


0:01:08 

T 


START 


STOP 



When we run the app on a phone, WorkoutDetailFragment 
is displayed inside a separate activity, DetailActivity. The 
stopwatch is still displayed underneath the workout details, and 
functions as expected. 


This is the app running on a 

phone. StopwatehFragrhcnt—^ 
is still displayed in 

WorkoutDetailFragment- 

AH the buttons work, and 
the stopwatch maintains its 
state when the device is 
rotated. 


4t) n 

* ± 12:08 1 

Workout 



The Wimp Special 

5 Pull-ups 
10 Push-ups 
5 Squats 


0:00:06 


n 


sP 


VVhen you dlidk on the 
Badk button, the list ot 
wovkouts is displayed 


M 

Workout 

# J L 16:46 1 

The Limb Loosener 


Core Agony 


The Wimp Special 


Strength and Length 
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CHAPTER 11 


toolbox 



your toolbox. 


You’ve got Chapter 11 under 
your belt and now you’ve 
added dynamic fragments to 


Your Android Toolbox 




BUUET POINTS 


■ Fragments can contain other fragments. 

■ If you use the android: onClick attribute in a fragment, 
Android will look for a method of that name in the fragment’s 
parent activity. 

■ Instead of using the android: onClick attribute in 
a fragment, make the fragment implement the view. 
OnClickListener interface and implement its 

onClick () method. 

■ If you use the <f ragment> element in your layout, the 
fragment gets recreated when you rotate the device. If your 
fragment is dynamic, use a fragment transaction instead. 

■ Fragments contain two methods for getting a fragment 
manager, getFragmentManager () and 
getChildFragmentManager(). 

■ getFragmentManager ( ) gets a reference to the fragment 
manager associated with the fragment’s parent activity. Any 
fragment transactions you create using this fragment manager 
are added to the back stack as extra transactions. 

■ getChildFragmentManager ( ) gets a reference to 
the fragment manager associated with the fragment’s parent 
fragment. Any fragment transactions you create using this 
fragment manager are nested inside the parent fragment 
transaction. 
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12 design support library 






Ever wondered how to develop apps with a rich, slick Ul? 

With the release of the Android Design Support Library, it became much easier to 
create apps with an intuitive Ul. In this chapter, we’ll show you around some of the 
highlights. You’ll see how to add tabs so that your users can navigate around your app 
more easily. You’ll discover how to animate your toolbars so that they can collapse or 
scroll on a whim. You’ll find out how to add floating action buttons for common user 
actions. Finally, we’ll introduce you to snackbars, a way of displaying short, informative 
messages to the user that they can interact with. 


this is a new chapter 


481 


more pizza 


The Pits and Pizzas app revisited 

In Chapter 8, we showed you a sketch of the top-level screen of the Bits and 
Pizzas app. It contained a list of places in the app the user could go to. The 
first three options linked to category screens for pizzas, pasta, and stores, 
and the final option linked to a screen where the user could create an order. 


ei-ts and. pl^as 

Pizzas 



Postal 
Stores 
Create Order <- 




This is the Pizza app top-level activity- 


f These link to eategov-y sdveens. 


-This takes yow to a sdv-een where 
you dan dreate a new order. We 
moved this to the app tar. 


So far you’ve seen how to add actions to the app bar. These are used for 
simple commands, such as Create Order or Send Feedback. But what about 
the category screens? As we want to use these for navigating through the 
app rather than taking an action, we’ll take a different approach. 

We’re going to change the Bits and Pizzas app so that it uses tab 
navigation. We’ll display a set of tabs underneath the toolbar, with each 
option on a different tab. When the user clicks on a tab, the screen for that 
option will be displayed. We’ll also let the user swipe left and right between 
the different tabs. 


This is the toolbar 




Bits and Pizzas 


VVcMI display a set ^ 
<Jc tabs underneath 
the toolbar -for 
Home, Pizzas, Pasta, 
and Stores. 


Home Pizzas Pasta Stores 


When you elidk on one ot 
the tabs, the Content -for 
that option is displayed 
here- The user will also be 
able to swipe between the 
different tabs. 
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design support library 


The app structure 

We’re going to change MainActivity so that it uses 
tabs. The tabs will include options for Home, Pizzas, 
Pasta, and Stores, so that the user can easily navigate to 
the main sections of the app. 

We’ll create fragments for these different options; when 
the user clicks on one of the tabs, the fragment for that 
option will be displayed: 


This is what 
the hew 
vevsioh o-p — 
the app will 
look like. 




We’ll go through the steps for how to do this on the next page. 
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steps 


Here's what we're going to do 

There are three main steps we’ll go through to get tabs working: 

Q Create the fragments. 

We’ll create basic versions of TopFragment, PizzaFragment, 
PastaFragment, and StoresFragment so that we can easily tell 
which fragment is displayed on each of the tabs. 


Well eveate 
these ‘Pv'agmehts. -— 


top fragment 

Diavolo 

Spaghetti Bologrt 

Cambridge I 


Funghi 

Lasagne / 

Sebastopol 1 


Enable swipe navigation between the fragments. 

We’ll update MainActivity so that the user can swipe between the 
different fragments. 


Well navigate 
to the 
different 
-fva^e^ts by 
swiping 

< -► 


N 

W 'A U 14:38 

Bits and Pizzas 

+ 

A 

Diavolo 


Funghi 

_ 


M 

▼ 14:39 

Bits and Pizzas 

+ 

A 

Spaghetti Bolognese 


Lasagne 



Add the tab layout. 

Finally, we’ll add a tab layout to MainActivity that will work in 
conjunction with the swipe navigation. The user will be able to navigate 
to each fragment by clicking on a tab, or swiping between them. 


Well add a 
tab layout to 
Alai y\ Activity, 
but the user will 
still be able to 
swipe between 
the -Pv-agmehts i-P 
they want to. 


We’ll start by creating the fragments. 


N 


* ^ B 17:04 1 

Bits and Pizzas 


+ 

A 

HOME PIZZAS 

PASTA 

STORES 



r 


T 

Jjo this? 


We’re going to update the 
Bits and Pizzas app in 
this chapter, so open your 
original Bits and Pizzas 
project from Chapter 8 in 
Android Studio. 
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Create TopFragment 


design support library 

Add fragments 
Add swiping 
Add tabs 


We’ll use TopFragment to display content that will appear on the Home 
tab. For now, we’ll display the text “Top fragment” so that we know which 
fragment is displayed. Highlight the com.hfad.bitsandpizzas package in the 
app/sre/main /java folder, then go to File—»New...—^Fragment—^Fragment 
(Blank). Name the fragment “TopFragment” and name its layout 
“fragment_top”. Then replace the code for TopFragment.java with the code 
below: 

package com.hfad.bitsandpizzas; 


"JopFv' , a<jimeirrk 



import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; \ 

import android.view.View; 
import android, view. ViewGroup; TopFragment java is a -fragment 


□ 

BitsAndPizzas 

H3 

app/sre/main 

43 


java 


-Prom -the Suppov-t Libvav-y. 
NT 

public class TopFragment extends Fragment { 


43 


com.hfad.bitsandpizzas 

L @ 

TopFragment.java 


@Override 


public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_top, container, false); 

} 


Add the following string resource to strings.xml] we’ll use this in our 
fragment layout: 

<string name="title_top M >Top fragment</string> 


Add this bo Wfe II use 

it in -the layout SO we know when 
TopFragment is being displayed- 


Then update the code for fragment_top.xml as follows: 


CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android” 
xmlns:tools="http://schemas.android.com/tools" □ 


android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.TopFragment"> 


BitsAndPizzas 


HU 

app/sre/main 


CTextView 

android:layout_width="match_j?arent" 
android:layout_height= M match_j?arent" 
android:text="@string/title_top" /> 
</LinearLayout> 


es _ 

MT3 


layout 



fragment_top.xml 
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create PizzaFragment 

Create PizzaFragment 

We’ll use a ListFragment called PizzaFragment to 
display the list of pizzas. Highlight the com.hfad.bitsandpizzas 
package in the app/sre/main /java folder, then go to 
File—>New...—^Fragment—^Fragment (Blank). Name the fragments 
“PizzaFragment”, and uncheck the option to create a layout. Why? 
Because list fragments don’t need a layout—they use their own. 

Next, add a new string array resource called "pizzas" to strings, 
xml (this contains the names of the pizzas): 


Add fragments 
Add swiping 
Add tabs 


<string-array name="pizzas"> 
<item>Diavo1o</item> 

<item>Funghi</item> 
</string-array> 


Add the array o-P 

pizzas to s-brings.xml 


PizzaFragment —^ 


Pon t dhoose the Fragment 
■(List) option, as this 
generates more domplex dode- 

□ 

BitsAndPizzas 

413 

app/sre/main 



4a 

values 


Then change the code for PizzaFragment.java so that it’s a 
ListFragment. Its list view needs to be populated with the 
pizza names. Here’s the updated code: 

package com.hfad.bitsandpizzas; 
import android.os.Bundle; 

import android.support.v4.app.ListFragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 


strings.xml 


a 

BitsAndPizzas 

app/sre/main 

KL3 

We'll use a LisUnra<y»e*t t o —. 

display the list ot pi***. |-J 


com.hfad.bitsandpizzas 


public class PizzaFragment extends ListFragment { 

PizzaFragment.java 

@Override 

public View onCreateView(Layoutlnflater inflater , ViewGroup container , 

Bundle savedlnstanceState) { 

ArrayAdapter<String> adapter = new ArrayAdapterO ( 

The AvvayAdaplev populates infla ter .getContext (), 
the ListPrant's Listl/iew android.R.layout.simple_list_item_l, 
wi-th ihe pizza names. getResources () . getstringArray (R. array .pizzas)) ; 

setListAdapter(adapter); 

return super.onCreateView(inflater, container, savedlnstanceState); 


} 


} 
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Create PastaFragment 

We’ll use a List Fragment called PastaFragment to display the list of 
pasta. Highlight the com.hfad.bitsandpizzas package in the app/src/main/java 
folder and create a new blank fragment named “PastaFragment”. You can 
uncheck the option to create a layout, as list fragments use their own layouts. 

Next, add a new string array resource called "pasta" to strings.xml (this 
contains the names of the pasta): 

<string-array name= M pasta M > 


design support library 

Add fragments 
Add swiping 
Add tabs 




□ 

BitsAndPizzas 





<item>Spaghetti Bolognese</item> ^—Add the away of 
<item>Lasagne</item> pasta to stHhgs.xr*!. 

</string-array> 

Then change the code for PastaFragment java so that it’s a 
Li st Fragment that displays a list of the pasta names. Here’s 
the updated code: 


app/sre/main 



values 



strings.xml 


package com.hfad.bitsandpizzas; 


import android.os.Bundle; 

import android.support.v4.app.ListFragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 


□ 

BitsAndPizzas 

L Q 

app/sre/main 

L a 

java 

MhI 


public class PastaFragment extends ListFragment { 


com.hfad.bitsandpizzas 

La 


PastaFragment.java 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 
ArrayAdapter<String> adapter = new ArrayAdapterO( 
inflater.getContext(), 
android.R.layout.simple_list_item_l, 
getResources().getstringArray(R.array.pasta)); 
setListAdapter(adapter); 

return super.onCreateView(inflater, container, savedlnstanceState); 


} 


} 


you are here ► 
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create StoresFragment 


Create StoresFragment 

We’ll use a ListFragment called StoresFragment to display 
the list of stores. Highlight the com.hfad.bitsandpizzas package in the 
app/sre/main /java folder and create a new blank fragment named 
“StoresFragment.” Uncheck the option to create a layout, as list 
fragments define their own layouts. 

Next, add a new string array resource called "stores" to strings, 
xml (this contains the names of the stores): 

<string-array name="stores"> 

<item>Cambridge</item> — $elc| £h e ^ ^ 

<item>Sebastopol</item> stoves to stv'mgs.xml. 
</string-array> 

Then change the code for StoresFragment.java so that it’s a 
ListFragment. Its list view needs to be populated with the 
store names. Here’s the updated code: 

package com.hfad.bitsandpizzas; 


Add fragments 
Add swiping 
Add tabs 


S-fco\rCsF\ragrwCh”t—^ 


BitsAndPizzas 


□ 

Pizz 

HB 

app/sre/main 

La 



MTJ 

values 


strings.xml 


a 


BitsAndPizzas 

app/sre/main 

KP 

We'll use a ListFva^evt to —, 

display the list ot stoves. H_) 

com, hfad.bi tsand pizzas 


import android.os.Bundle; 

import android.support.v4.app.ListFragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 

public class StoresFragment extends ListFragment { 

StoresFragment.java 

@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

ArrayAdapter<String> adapter = new ArrayAdapterO( 
inflater.getContext(), 
android.R.layout.simple_list_item_l, 
getResources().getStringArray(R.array.stores)); 
setListAdapter(adapter); 

return super.onCreateView(inflater, container, savedlnstanceState); 

} 

} 

We’ve now added all the fragments we need, so let’s move on to 
the next step. 
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Use a view pager to swipe through fragments 


design support library 



Add fragments 
Add swiping 
Add tabs 


We want to be able to swipe through the different fragments 
we’ve just created. To do this, we’ll use a view pager, which is 
a view group that allows you to swipe through different pages in 

a layout, each page containing a separate fragment. The view fSjer will let us swipe 

between the di^erent tvajmcnts. 

i \ 




TopFragment PastaFragment PizzasFragment StoresFragment 


You use a view pager by adding it to your layout, then writing 
activity code to control which fragments should be displayed. The 

ViewPager class comes from the v4 Support Library, which ybu dan check whiCh Support Libraries 

is included in the v7 AppGompat Support Library, so you also are included in your project in Android 

need to make sure you add one of these libraries to your project ^—* Studio by Choosing Project Structure 
as a dependency. In our particular case, we already added the v7 -from the File menu, clicking on the app 
AppGompat Support Library to our project in Chapter 8. module, and then choosing Dependencies. 

What view pager layout code looks like 

You add a view pager to your layout using code like this: 

You need to jive the V/ieviPa^ev an IP so 
that you dan dontrol its behavior in your 
activity Code- 

' /> 

The above code defines the view pager, and gives it an ID of 
pager. Every view pager you create must have an ID so that 
you can get a reference to it in your activity code. Without this 
ID, you can’t specify which fragments should appear on each 
page of the view pager. 

We’re going to add a view pager to MainActivity. We’ll 
look at the full code for its layout on the next page. 


The 1/iewPdgev* class— ^-<android. support. v4 . view. ViewPager 

is tound in the v^“ .. . 

Support Library android :l d="@ +1 d/pager" 

(whidh is indluded in android:layout_width="match_j>arent" 


the v7 AppCompat 
Support Library). 


android:layout_height= M match_j?arent' 


you are here ► 
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view pager 


Add a view pager to MainActivity's layout 

We’re going to add a view pager to MainActivity’s layout, 
and remove the text view that’s already there. Open the file 
activity_main.xml, then update your code so that it matches ours 
below (we’ve bolded our changes): 



Add fragments 
Add swiping 
Add tabs 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/androi ( 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 

<include 

layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 


■ 

Bits And Pizzas 

app/src/main 


res 


MT3 

layout 


activity_ 

main.xml 


<android.support.v4.view.ViewPager * 
android:id= M @+id/pager" 
android:layout_width= M match_j?arent" 
android:layout_height= M match_j?arent M /> 


Add the ViewPa^ev 

below the Toolbav*. 



WicVc y\o lohyv disflaymj a 
"~fe%t\/iew m Ma*mA^tW’ity> so 
delete these Imes o-f dode- 


</LinearLayout> 


That’s everything we need to add a view pager to our layout. 
To get our new view pager to display fragments, we need to 
write some activity code. We’ll do that next. 
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Tell a view pager about its pages using 
a fragment pager adapter 



design support library 

Add fragments 
Add swiping 
Add tabs 


To get a view pager to display a fragment on each of its pages, there 
are two key pieces of information you need to give it: the number 
of pages it should have, and which fragment should appear on each 
page. You do this be creating a fragment pager adapter, and 
adding it to your activity code. 

A fragment pager adapter is a type of adapter that specializes in 
adding fragments to pages in a view pager. You generally use one 
when you want to have a small number of pages that are fairly 


Fragment pager adapter code looks like this: 


static, as each fragment the user visits is kept in memory. ^ 


|t you wanl your view pager have a lary 
number of pays, you would use a fragment state 
payr adapter instead- Were not dovering it 
here, but tbe dode is almost identidal- 


A 

We're setting 
this to private, 
as were goihtj 
to add it to 
AlamActivity as 
ah ihher dass. 


private class SectionsPagerAdapter extends FragmentPagerAdapter { 


public SectionsPagerAdapter(FragmentManager fm) { 


super(fm); 


You must have a dohst\rudto\r that 
takes a FragmehtAIaha^ev- parameter. 


You heed to e*tehd the 

Fra^mehtPa^erAdapter 

elass. 


@Override 

public int getCount() { 

//The number of pages in the ViewPager 

} 


You heed to override the ^etCouhtO method to 
spedify tbe number of pages in tbe view pager. 


Y°u need to say whidh fragment should appear on eadh 
@Override pa 9 e ' The the page number, starting at O. 

public Fragment getltem(int position) { 

//The fragment to be displayed on each page 


When you create a fragment pager adapter, there are two key 
methods you must override: getCount () and get Item () . 
You use getCount () to specify how many pages there should 
be in the view pager, and the get Item () to say which fragment 
should be displayed on each page. 

We’ll show you the code for the Bits and Pizzas fragment pager 
adapter on the next page. 


you are here ► 
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FragmentPagerAdapter 


The code for our fragment pager adapter 

We want our view pager to have four pages. We’ll display 
TopFragment on the first page, PizzaFragment 
on the second, PastaFragment on the third, and 
StoresFragment on the fourth. 

To accomplish this, we’re going to create a fragment pager 
adapter called SectionsPagerAdapter. Here’s the code 
(we’ll add it to MainActivity.java in a couple of pages): 

private class SectionsPagerAdapter extends FragmentPagerAdapter { 


s/ 


Add fragments 
Add swiping 
Add tabs 


public SectionsPagerAdapter(FragmentManager fm) { 
super(fm); 

□ 


BitsAndPizzas 


@Override 

public int getCountO { 

return 4 


we 


The getCountO 
method spe£i-Pies 
\ pages, so 
■the getltemO 
method should 
only reguest the 
-fragments -for 
these 4r page 
positions. 


• We II have W pages in ouv- 1/iewPager, 
} 0 »« **■ eath op -the -fragments y, 

want b> be able io swipe through 

QOverride 

public Fragment getltem(int position) { 

switch (position) { 
case 0: 

return new TopFragment();^ 
case 1: 

return new PizzaFragment(); 
case 2: 

return new PastaFragment(); 
case 3: 

return new StoresFragment() 

} 

return null; 


KT3 

app/sre/main 

MB 


java 


m 


com.hfad.bitsandpizzas 

Mair ctivity.java 

We want to display TopFragment 
-firsts so well return a new instance 
o-P it -for position 0 o-f the \/iewPager. 


} 

That’s all the code we need for our 

SectionsPagerAdapter. Next we need to get our view 
pager to use it. 
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Attach the fragment pager adapter 
to the view pager 



design support library 

Add fragments 
Add swiping 
Add tabs 


Finally, we need to attach our SectionsPagerAdapter 
to the view pager so that the view pager can use it. You 
attach a fragment pager adapter to a view pager by calling 
the ViewPager setAdapter () method, and passing it a 
reference to an instance of the fragment pager adapter. 

Here’s the code to attach the fragment pager adapter we 
created to the view pager: 

QOverride 


□ 

BitsAndPizzas 

L C3 

app/src/main 

MB 


protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 

//Attach the SectionsPagerAdapter to the ViewPager 

SectionsPagerAdapter pagerAdapter = 


java_ 

■ 

com.hfad.bitsandpizzas 



MainActivity.java 


new SectionsPagerAdapter(getSupportFragmentManager()); 


ViewPager pager = (ViewPager) findViewByld(R.id.pager); 
pager. setAdapter (pagerAdapter) ; y^ is a ^ t ), es 

} Fvagmen-tPagevAdap-ter we 

dvea-ted -to -the i/iewPager. 

That’s everything we need to be able to swipe through our 
fragments. We’ll show you the full code for MainActivity 
on the next page. 


VVcVc us'mg support -fragments, 
so we need to pass our 
adapter a re-Cerente to the 
support 'fragment manager. 


tWeidle no 

Dumb Questions 


0 : 


When should I use tabs in my 


% What if I have a large number of 
categories? Can I still use tabs? 


% You mentioned the fragment state 
pager adapter. What’s that? 


Tabs work well when you want to give 
the user a quick way of navigating between 
a small number of sections or categories. 
You would generally put each one on a 
separate tab. 


You can, but you may want to 
consider other forms of navigation such as 
navigation drawers. These are panels that 
slide out from the side of the screen. We’ll 
show you how to create them in Chapter 14. 


It’s very similar to a fragment pager 
adapter, except that it also handles saving 
and restoring a fragment’s state. It uses 
less memory than a fragment pager 
adapter, as when pages aren’t visible, the 
fragment it displays may be destroyed. 

It’s useful if your view pager has a large 
number of pages. 


you are here ► 
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MainActivity code 


Add fragments 
Add swiping 
Add tabs 


V/ 


The full code for MainActivity .java 

Here’s our full code for MainActivity.java. Update your version of 
the code to match our changes (in bold): 


package com.hfad.bitsandpizzas; 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 
import android.view.Menu; 
import android.view.Menultem; 
import android.content.Intent; 

import android.support.v7.widget.ShareActionProvider; 
import android.support.v4.view.MenuItemCompat; 

import android.support.v4.view.ViewPager 




import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 

public class MainActivity extends AppCompatActivity { 

private ShareActionProvider ShareActionProvider; 


We’ve using these e*tva classes 
so we need to impovt them 


□ 

BitsAndPizzas 

Ha 

app/src/main 

L a 


java 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar) , 
setSupportActionBar(toolbar); 


lo 


com.hfad.bitsandpizzas 


MainActivity.java 


//Attach the SectionsPagerAdapter to the ViewPager 
SectionsPagerAdapter pagerAdapter = 

new SectionsPagerAdapter(getSupportFragmentManager()); 
ViewPager pager = (ViewPager) findViewByld(R.id.pager); 
pager.setAdapter(pagerAdapter); 

T 

Attach the FvajmentPayvAdaptev to the \AewPagev. 
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The Code Continues 
on the next page- ^ 



The MainActiviiy.java code (continued) 


V/ 


design support library 

Add fragments 
Add swiping 
Add tabs 


tJone of -the Code on 
-this paje has thawed 


@Override 

public boolean onCreateOptionsMenu(Menu menu) { 

getMenuInflater().inflate(R.menu.menu_main, menu); 

Menultem menultem = menu.findltem(R.id.action_share); 
shareActionProvider = 

(ShareActionProvider) MenuItemCompat.getActionProvider(menultem); 
setShareActionlntent("Want to join me for pizza?"); 
return super.onCreateOptionsMenu(menu); 


□ 


BitsAndPizzas 


MT3 


@Override 

public boolean onOptionsItemSelected(Menultem item) { 
switch (item.getltemld()) { 

case R.id.action_create_order: 

Intent intent = new Intent(this, OrderActivity.class); 
startActivity(intent); 
return true; 
default: 

return super.onOptionsItemSelected(item) ; 

} 


app/src/main 

L a 

java_ 

m3 

com. hfad.bitsand pizzas 


MainActivity.java 


private void setShareActionlntent(String text) { 

Intent intent = new Intent(Intent.ACTION_SEND); 
intent.setType("text/plain"); 
intent.putExtra(Intent.EXTRA_TEXT, text); 
shareActionProvider.setSharelntent(intent); 


The toAt ^Ohtihues 
oh the *ext page. 


you are here ► 
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code, continued 




The MainActiviiy.java code (continued) 


Add fragments 
Add swiping 
Add tabs 


private class SectionsPagerAdapter extends FragmentPagerAdapter { 

A. 

The F^g^eh-tPageirAdap-tev' passes 

public Sections Pager Adapter (FragmentManager fm) { \nhmahon ho the Wev/Page 
super(fm); 




} 


QOverride 

public int getCount() { 
return 4; 

} 


Say how ms^y pages “the 

\7iewPagev- should torrta’m- 


Speei-Py whidh -(ragmeni 
should appear on ea£h page. 


@Override 

public Fragment getltern(int position) { 
switch (position) { 
case 0: 

return new TopFragment(); 
case 1: 

return new PizzaFragment(); 
case 2: 

return new PastaFragment(); 
case 3: 

return new StoresFragment() 

} 

return null; 


□ 

Pizz 

HU 


BitsAndPizzas 


app/sre/main 

'-m 

java 

m 3 

com.hfad.bitsandpizzas 

L @ 

MainActivity.java 


} 


Now that we’ve updated our MainActivity code, 
let’s take our app for a test drive and see what happens. 
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Test drive the app 


When we run the app, TopFragment is displayed. When we 
swipe the screen to the left, PizzaFragment is displayed, 
followed by PastaFragment and StoresFragment. When 
we swipe the screen in the opposite direction starting from 
StoresFragment, PastaFragment is displayed, followed by 
PizzaFragment and TopFragment. 


s/ 

-Hv 


design support library 

Add fragments 
Add swiping 
Add tabs 


Top fragment 


This is "lopFrajment- 
Its displayed -first. 


Diavolo 


Funghi 


PizzaFragment 
is shown 



Now that we can swipe through the fragments in 
MainActivity, let’s add tabs. 


Spaghetti Bolognese 

Lasagne 

* 

••.-followed by 

PastaFragment- 


The ViewPager displays the 
-fragments in this order as 
we swipe through the™. 



Bits and Pizzas 


Cambridge 


Sebastopol 




StoresFragment is 
last- There are no 
™ore pages in the 
\/iewPager a-fter this. 



+ < 
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add design support library 


Add tab navigation to MainActivity 

We’re going to add tabs to MainActivity as an additional way of 
navigating through our fragments. Each fragment will be displayed on 
a separate tab, and clicking on each tab will show that fragment. We’ll 
also be able to swipe through the tabs using the existing view pager. 



Add fragments 
Add swiping 
Add tabs 


The user will 
still be able to 
swipe through 
the -fragments 
as be-fore. 


You use tabs by adding them to your layout, then writing activity code 
to link the tabs to the view pager. The classes we need to do this come 
from the Android Design Support Library, so you need to add this 
library to your project as a dependency. To do this, choose File—>Project 
Structure in Android Studio, click on the app module, then choose 
Dependencies. When you’re presented with the project dependencies 
screen, click on the “+” button at the bottom or right side of the screen. 
When prompted, choose the Library Dependency option, then select 
the Design Library from the list of possible libraries. Finally, use the OK 
buttons to save your changes. 


We II look at the Design 
Support Library in more 
detail later in the chapter. 


Bits and Pizzas 


The tabs will be displayed 
underneath the toolbar. - 


► 2| Q 17:04 

+ < 


HOME PIZZAS PASTA STORES 


fop fragment 



‘ The Home tab is highlighted, 
as thats the Current tab. 


e ^ o 


Project Structure 


+ - 

SDK Location 
Project 

Developer Se™ 
Ads 

Authentica... 

Notifications 

Modules — 


. Properties Signing Flavors Build Types 


Dependencies 


Scope 

(IncludedJar], dir=libs} Compile 

androidTestCompile( l com.andrt>id.suppon,iesi.espre5so:espressQ-care:Z.Z.Z 

fll com .a n d roi d . s u p p ort. constra i nt: constra i nt- layout: 1.0.2 Compile 

flJ junit:junit:4.12 Test compile 

m com. android. support:appcompat-v7:25.3.0 Compile 

fll com.android.support:design:25.3.0Compile 


We ve added the Android Design Support 
Library to our project as a dependency. 
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design support library 


How to add tabs to your layout 

You add tabs to your layout using two components from 
the Design Support Library: a TabLayout and an 
AppBarLayout. You use a TabLayout to add the tabs, and 
the AppBarLayout to group the tabs and your toolbar together. 


y/ Add fragments 

~ Add swiping 

Add tabs 


The code to add tabs to your layout looks like this: 

<android.support.design.widget.AppBarLayout 


^ The AppBavLayout tomes -from 
4-V^ Support Library. 


android:layout_width="match_j?arent" 
android:layout_height= M wrap_content" 

android:theme= M @ style/ThemeOverlay.AppCompat.Dark.ActionBar 

<android. support. v7 . widget. Toolbar Y° u include the Toolbar 

android: id="@+id/toolbar" l|,,s,c * e AppBarLayout- 


_This line applies a 

- -theme to the Toolbar 

" > and TabLayout so 

that they have a 
donsistant appearance- 


android:layout_width= n match_parent M 

android:layout_height="?attr/actionBarSize" /> 


<android.support.design.widget.TabLayout 
android:id="@+id/tabs" 
android:layout_width="match_j?arent" 


The TabLayout tomes -from the 
Pesi^nSuffortLibrary. You add 
it to the AppBarLayout- 


android:layout_height="wrap_content" /> 


</android.support.design.widget.AppBarLayout> 


The Toolbar and TabLayout elements both have IDs 
because you need to be able to reference them in your activity 
code in order to control their behavior. 

The AppBarLayout contains both the Toolbar and the 
TabLayout. It’s a type of vertical linear layout that’s designed 
to work with app bars. The android: theme attribute is used 
to style the Toolbar and TabLayout. We’ve given ours a 
theme ofThemeOverlay.AppCompat.Dark.ActionBar. 

On the next page we’ll show you the code to add tabs to 
MainActivity’s layout. 


you are here ► 
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layout code 


Add tabs to MainActivity's layout 

Here’s our code for activity_main.xml. Update your version of 
the code to match our changes (in bold): 



Add fragments 
Add swiping 
Add tabs 


<?xml version="1.0" encoding="utf-8"?> 

CLinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 


□ 

Bits And Pizzas 

4T3 

app/src/main 

4a 


<android. support, design, widget. AppBarLayout ^—-Add an AppBarLayout 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content" 

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > 



activity_ 

main.xml 




<android.support.v7.widget.Toolbar 
The Toolbar —^ android: id="@+id/toolbar" 


We've dedided to yut our Toolbar tode m 
adtivity__">ain*ml instead ok indludinj it trom 
a separate -file- This is so that we tan show 
you the til dode in one ylade- In yradtide, 
usinoj the <indlude> still works. 


Joes inside the android:layout_width="match_parent" 

android:layout_height="?attr/actionBarSize" /> 


<android. support.design.widget.TabLayout ^a TabLayout inside “the AppBav-Layout 
android:id="@+id/tabs" 
android:layout_width="match_j?arent" 
android:layout_height="wrap_content" /> 

</android.support.design.widget.AppBarLayout> 


<android.support.v4.view.ViewPager 
android:id="@+id/pager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 
</LinearLayout> 
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Link the tab layout to the view pager 

Once you’ve added the tab layout, you need to write some activity code to 
control it. Most of the tab layout’s behavior (such as which fragment appears on 
which tab) comes from the view pager you’ve already created. All you need to do 
is implement a method in the view pager’s fragment pager adapter to specify the 
text you want to appear on each tab, then link the view pager to the tab layout. 

We’re going to add the text we want to appear on each of the tabs as String 
resources. Open the file strings.xml, then add the following Strings: 


v 

v 


design support library 

Add fragments 
Add swiping 
Add tabs 


BitsAndPizzas 



These Strings 
will be displayed 
On -the -tabs. 


To add the text to each of the tabs, you need to implement the fragment pager 
adapter’s getPageTitle () method. This takes one parameter, an int for the 
tab’s position, and needs to return the text that should appear on that tab. Here’s 
the code we need to add the above String resources to our four tabs (we’ll add it 
to MainActivity.java on the next page): 


□ 

Pizz 

4 B 

app/sre/main 

m□ 


values 


strings.xml 


This is a new 
method in -the 
fv-a<y*en-t pajev- 
adaptev- we 
Seated earlier. 


@Override 

public CharSequence getPageTitle(int position) { 
switch (position) { 
case 0: 

return getResources().getText(R.string.home_tab); 
case 1: 

return getResources().getText(R.string.pizza_tab) 
case 2: 

return getResources().getText(R.string.pasta_tab) 
case 3: 

return getResources().getText(R.string.store_tab) 

> ^ 


□ 

Pizz 

Kill 

c/m 

L Q 

m 


BitsAndPizzas 

Tt 

app/sre/main 

'C 

java 


com.hfad.bitsandpizzas 


MainActivity.java 


return null; 


} 


These lines of dode add *the 
String resources *to *the tabs. 


Finally, you need to attach the view pager to the tab layout. You do this by calling 
the TabLayout object’s setupWithViewPager () method, and passing in a 
reference to the ViewPager object as a parameter: 

TabLayout tabLayout = (TabLayout) findViewByld(R. id. tabs) ; 
tabLayout.setupWithViewPager(pager); ^1- 


That’s everything we need to get our tabs working. We’ll show 
you the full code for MainActivity on the next page. 


This line atfcadhes -the 1/iewPagev -fco -the 
TabLayout The TabLayout uses -the 1/iewPajev- 
b> detev-mime how mamy -tabs there should be, amd 
what should be om each tab. 
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MainActivity code 


The full code for MainActivity.java 

Here’s our full code for MainActivity.java. Update your version of 
the code to match our changes (in bold): 

package com.hfad.bitsandpizzas; 



Add fragments 
Add swiping 
Add tabs 


import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

public 


□ 


BitsAndPizzas 


HU 

app/src/main 


L U 


java 


m 


android.support.v7.app.AppCompatActivity; 
android.os.Bundle ; 

android.support.v7.widget.Toolbar; 
android.view.Menu; 
android.view.Menultem; 
android.content.Intent; 

android.support.v7.widget.ShareActionProvider; 
android.support.v4.view.MenuItemCompat; 
android.support.v4.view.ViewPager; 
android.support.v4.app.Fragment; 
android.support.v4.app.FragmentManager; 
android.support.v4.app.FragmentPagerAdapter; 

android, support.design, widget.TabLayout; <=_ ^eVe using the TabLayout 

class, so we need to import it' 

class MainActivity extends AppCompatActivity { 


com.hfad.bitsandpizzas 

Ur 


MainActivity.java 


private ShareActionProvider ShareActionProvider; 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar(toolbar); 


//Attach the SectionsPagerAdapter to the ViewPager 
SectionsPagerAdapter pagerAdapter = 

new SectionsPagerAdapter(getSupportFragmentManager()); 
ViewPager pager = (ViewPager) findViewByld(R.id.pager); 
pager.setAdapter(pagerAdapter); 


//Attach the ViewPager to the TabLayout 

TabLayout tabLayout = (TabLayout) findViewByld(R.id.tabs); 
tabLayout.setupWithViewPager(pager); 

This links -the ViewPagev -to -the TabLayout 


The Code Continues 
on the next page. 
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The MamActivity.java code (continued) 


v 

V 


design support library 

Add fragments 
Add swiping 
Add tabs 


Hone of -the tode on 

■this pay has thanyd 


QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 

getMenuInflater().inflate(R.menu.menu_main, menu); 

Menultem menultem = menu.findltem(R.id.action_share); 
shareActionProvider = 

(ShareActionProvider) MenuItemCompat.getActionProvider(menultem); 
setShareActionlntent("Want to join me for pizza?"); 
return super.onCreateOptionsMenu(menu); 


□ 


BitsAndPizzas 


MT3 


app/sre/main 

L H3 

java_ 

m 

com. hfad.bitsand pizzas 

i—P| 

Intent intent = new Intent (this, OrderActivity.class); 

MainActivity.java 


QOverride 

public boolean onOptionsItemSelected(Menultem item) { 
switch (item.getltemld()) { 

case R.id.action create order: 


startActivity(intent); 
return true; 
default: 

return super.onOptionsItemSelected(item); 


private void setShareActionlntent(String text) { 

Intent intent = new Intent(Intent.ACTION_SEND); 
intent.setType("text/plain"); 
intent.putExtra(Intent.EXTRA_TEXT, text); 
shareActionProvider.setShareintent(intent); 


The toAt £ohtihues 
oh the *ext page. 
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code, continued 


The MamActivity.java code (continued) 


v 

V 


Add fragments 
Add swiping 
Add tabs 


private class SectionsPagerAdapter extends FragmentPagerAdapter { 


public SectionsPagerAdapter(FragmentManager fm) { 
super(fm); 

} 


QOverride 

public int getCountO { 
return 4; 

} 

QOverride 

public Fragment getltem(int position) { 
switch (position) { 
case 0: 

return new TopFragment(); 
case 1: 

return new PizzaFragment(); 
case 2: 

return new PastaFragment(); 
case 3: 

return new StoresFragment(); 


□ 

Pizz 

m 


BitsAndPizzas 


app/sre/main 

m□ 

'"t3 

MainActivity.java 


return null; 


} 


_ This method adds the tent to the tabs. 

@Override 

public CharSequence getPageTitle(int position) { 
switch (position) { 
case 0: 

return getResources() .getText(R.string.home_tab) ; 
case 1: 

return getResources() .getText(R.string.pizza_tab) ; 
case 2: 

return getResources().getText(R.string.pasta_tab); 
case 3: 

return getResources() .getText(R.string.store_tab) ; 

} 

return null; 
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■-1 

Test drive the app 


When we run the app, MainActivity includes a tab layout. 
We can swipe through the fragments as before, and we can also 
navigate to each fragment by clicking on the appropriate tab. 


design support library 


v 

v 

-ny 


Add fragments 
Add swiping 
Add tabs 
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material design 


The Resign Support Library helps you 
implement material design 

So far, we’ve added tabs to our app to help the user navigate around the 
app. To do this, we’ve used two components from the Design Support 
Library: the TabLayout and AppBarLayout. 

The Design Support Library was introduced as a way of making it 
easier for developers to use material design components in their 
apps. Material design was introduced with Lollipop as a way of giving a 
consistent look and feel to all Android apps. The idea is that a user can 
switch from a Google app like the Play Store to an app designed by a 
third-party developer and instantly feel comfortable and know what to 
do. It’s inspired by paper and ink, and uses print-based design principles 
and movement to reflect how real-world objects (such as index cards 
and pieces of paper) look and behave. 


- 

MOV**"?? 
lesty V ' e ' re 


The Design Support Library lets you do more than add tabs to your 
apps. 


o 

o 


It lets you add floating action buttons (FABs). 

These are special action buttons that float above the main screen. 


It includes snackbars, a way of displaying interactive 
short messages to the user as an alternative to toasts. 

Unlike a toast (which you learned about in Chapter 5), you can add 
actions to snackbars so that the user can interact with them. 



This is 

a FAB- 



This is a snatkbav. |*t s like a 
ioas-t, but move mtevadtive- 


o 


You can use it to animate your toolbars. 

You can make your toolbar scroll off the screen, or collapse, if the user 
scrolls content in another view. 


o 


It includes a navigation drawer layout. 

This is a slide-out drawer you can use as an alternative to using tabs. 
We’ll look at this feature in Chapter 14. 


For the rest of this chapter, we’re going to show you how to 
implement some of these features in the Bits and Pizzas app. 
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design support library 


Here's what well do 


We’re going to add more goodness from the Design Support Library 
to the Bits and Pizzas app. Here are the steps we’ll go through: 

Q Enable MainActivity's toolbar to scroll. 

We’ll change MainActivity so that the toolbar scrolls 
up and down when the user scrolls the contents of the 
view pager we added earlier. To see this working, we’ll 
add content we can scroll to Top Fragment. 

Men the user scrolls -this Content, 
the “toolbar Will scroll up “too. 


Add a collapsing toolbar to Order Activity. 

We’ll start by adding a plain collapsing toolbar to 
Order Activity. The toolbar will collapse when 
the user scrolls OrderActivity’s contents. After 
we’ve got the plain collapsing toolbar working, 
we’ll add an image to it. 


This is a “toolbar v/i-tb an image-v^^ 
Men “the user scrolls -the main 
Content, well get it to £ollapse. 


Add a FAB to Order Activity. 

We’ll display a floating action button to the bottom- 
right corner. 


This is the FAB well 
add to Order Activity. 




Make the FAB display a snackbar. 

The snackbar will appear at the bottom of the screen 
when the user clicks on the FAB. The FAB will move 
up when the snackbar appears, and move back down 
when the snackbar is no longer there. 



We’ll start by getting our toolbar to scroll in response to the 
user scrolling the content in the view pager. 
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coordinator layout 


Make the toolbar respond to scrolls 


We’re going to change our app so that MainActivity’s toolbar 
scrolls whenever the user scrolls content in TopFragment. To 
enable this, there are two things we need to do: 


o 

© 


Change MainActivity's layout to enable the 
toolbar to scroll. 

Change TopFragment to include scrollable 
content. 


We’ll start by changing MainActivity’s layout. 


Use a CoordmatorLayout to coordinate 
animations between views 

To get the toolbar to move when content in the fragment is 
scrolled, we’ll add a coordinator layout to MainActivity. A 
coordinator layout is like a souped-up frame layout that’s used to 
coordinate animations and transitions between different views. In 
this case, we’ll use the coordinator layout to coordinate scrollable 
content in TopFragment and MainActivity’s toolbar. 

You add a coordinator layout to an activity’s layout using code like 
this: 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


We II the toolbar to scroll when the 
user strolls the dontent in TopFragment 



Bits and Pizzas 


HOME P ZZAS PASTA STORES 


Bits and Pizzas 


Since we opened our doors in 2017, Bits and Pizzas 
has built its reputation as one of America's best Italian 
Digital restaurants. Some people believe eating out is 
about being with your friends and family. We believe 
that good food is best enjoyed while staring at your 
phone. 


Well add this scrollable 


Content to TopFragment 


<android.support.design.widget.CoordinatorLayout ^ ' 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent M > 


The Coov-dmaWL-ayou-t tomes 
kom the Desiy* Support Library. 


. . . You add any Views whose behavior you want to 

Coordinate inside the CoordinatorLayout- 

</android.support.design.widget.CoordinatorLayout> 

Any views in your layout whose animations you want to coordinate 
must be included in the <CoordinatorLayout> element. In 
our case, we want to coordinate animations between the toolbar 
and the contents of the view pager, so these views need to be 
included in the coordinator layout. 


A CoordinatorLayout 
allows the behavior ol 
one view to allect the 
behavior ol another. 


508 Chapter 12 








design support library 


Add a coordinator layout to MainActivity's layout 

We’re going to replace the linear layout in activity_main.xml with a 
coordinator layout. Here’s our code; update your version to match 

VVeVe repl3£»fi$ the LinearLayout 
wth a CoovdmaWLayout- 

xmlns:android="http://schemas.android.com/apk/res/android" 

xmlns:app="http://schemas.android.com/apk/res-auto" ^-- ^ apf as well 

xmlns : tools="http : //schemas . android. com/tools" heed to use attributes -(Vor* i-fc 

android:layout_width="match_parent" ovc,r the next tew pages, 

android: layout_height="match_parent " pelete this line, as weVe ho 

I d *- or i nnfe^t r HTT* " w n i t~i u. j 1 * n - ^-longer using a Li near Layout* 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 



<android.support.design.widget.AppBarLayout 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:theme="Qstyle/ThemeOverlay.AppCompat.Dark. 

Bits And Pizzas 



<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" /> 


hd 

app/sre/main 

HD 


HD 


<android.support.design.widget.TabLayout 
android:id="@+id/tabs" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" /> 
</android.support.design.widget.AppBarLayout> 


layout 



activity_ 

main.xml 


<android.support.v4.view.ViewPager 
android:id="@+id/pager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 

</android.support.design.widget.CoordinatorLayout> 

|/VeVe replacing the LinearLayout 

with a CoovdmatovLayout- you are here ► 509 




scroll behavior 


How to coordinate scroll behavior 

As well as adding views to the coordinator layout, you need to say how 
you want them to behave. In our case, we want the toolbar to scroll 
in response to another view’s scroll event. This means that we need 

to mark the view the user will scroll , and tell the toolbar to 
respond to it. 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


Mark the view the user will scroll 

You mark the view the user will scroll by giving it an attribute of 
app: layout_behavior and setting it to the built-in String M @ 
string/appbar_scrolling_view_behavior". This tells the 
coordinator layout that you want views in the app bar layout to be 
able to respond when the user scrolls this view. In our case, we want 
the toolbar to scroll in response to the user scrolling the view pager’s 
content, so we need to add the app : layout_behavior attribute to 

the ViewPager element: add ^',s | me ^ the ViewPa^ to 

<android. support .v4 . view.ViewPager "tell "the CoovdinatovLayout yow yiant'to 

react to the usev sdrollm^ its Content- 

app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 


Tell the toolbar to respond to scroll events 

You tell views in the app bar layout how to respond to scroll events 
using the app : layout_scrollFlags attribute. In our case, 
we’re going to set the toolbar to scroll upward off the screen when 
the user scrolls the view pager content up, and quickly return to its 
original position when the user scrolls down. To do this, we need 
to set the Toolbar app : layout_scrollFlags attribute to 
"scroll|enterAlways". 

The scroll value allows the view to scroll off the top of screen. 
Without this, the toolbar would stay pinned to the top of the screen. 
The enterAlways value means that the toolbar quickly scrolls down 
to its original position when the user scrolls the corresponding view. The 
toolbar will still scroll down without this value, but it will be slower. 

Here’s the code we need to add to the toolbar to enable it to scroll: 

<android.support.v7.widget.Toolbar 


Tkc tooiw MUST 

be contained within 
an app har layout in 
order lor it to scroll. 
The app har layout 
and coordinator layout 
work together to enable 
the toolbar to scroll. 


app:layout_scrollFlags="scroll|enterAlways" /> 


We’ll look at the full code for MainActivity’s layout on the next page. 


This I me “tells ihe Coovdina*tov-Layou*t 
(and AffBavLayou-t) how you warrl 
*the Toolbar -to veadt *to *the usev- 
sdroll’m^ torbtnb 
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The code to enable to toolbar to scroll 

Here’s our updated code for activity,_ma.in.xml. Update your 
version of the code to match our changes (in bold): 


design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.CoordinatorLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 

tools:context="com.hfad.bitsandpizzas.MainActivity"> 


□ 


Bits And Pizzas 


4H 

app/src/main 

MB 


<android.support.design.widget.AppBarLayout 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 

android:theme="Qstyle/ThemeOverlay.AppCompat.Dark.ActionBar" > 



activity_ 

main.xml 


<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 

app:layout_scrollFlags="scroll|enterAlways" /> 

<android.support.design.widget.TabLayout 
android:id="@+id/tabs" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" /> 

</android.support.design.widget.AppBarLayout> 


Add -this line to enable the 
Toolbar to stroll- l-f you 
waited the TabLayout to 
stroll too, you d add the 
todt to that element as well- 


<android.support.v4.view.ViewPager 
android:id="@+id/pager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 

app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

</android.support.design.widget.CoordinatorLayout> ^ 


Those are all the changes we need to make to MainActivity. 
Next we’ll add scrollable content to TopFragment. 


This line marks the view whose 
tonic *t you expect the usev to scroll. 
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add resources 


Add scrollable content to TopFragment 

We’re going to change TopFragment’s layout so that it contains 
scrollable content. We’ll add an image of one of the Bits and Pizzas 
restaurants, along with some text describing the company ethos. 

Here’s what the new version of TopFragment will look like: 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


Bits and Pizzas 

Since we opened our doors in 2017, Bits and Pizzas 
has built its reputation as one of America's best Italian- 
Digital restaurants. Some people believe eating out is 
about being with your friends and family. We believe 
that good food is best enjoyed while staring at your 
phone. 


Well change TopFrajment -to mdlwde 
an imay and some tent- We wanl 
■tbe user "to be able U scroll "tbe 
eniire con-tents of tbe fragment- 


We’ll start by adding the String and image resources to our project. 

Add String and image resources 

We’ll add the String resources first. Open strings.xml, then add the 
following: 


□ 

BitsAndPizzas 

app/sre/main 

H3 


<string name="company_name">Bits and Pizzas</string> 

<string name="restaurant_image">Restaurant image</string> 

<string name="home_text">Since we opened our doors in 2017, Bits and Pizzas 
has built its reputation as one of America's best Italian-Digital 
restaurants. Some people believe eating out is about being with your 
friends and family. We believe that good food is best enjoyed while 
staring at your phone.</string> 


values 


strings.xml 


Next we’ll add the restaurant image to the drawable-nodpi folder. First, 
switch to the Project view of Android Studio’s explorer and check 
whether the app/src/main/res/drawable-nodpi folder exists in your 
project. If it’s not already there, highlight the app/src/main/res folder, 
go to the File menu, choose the New... option, then click on the option 
to create a new Android resource directory. When prompted, choose 
a resource type of “drawable”, name it “drawable-nodpi” and click on 
OK. 

Once you have a drawable-nodpi folder, download the file restaurant.jpg 
from https://git.io/v9oet , and add it to the drawable-nodpi folder. 



Y °u need 
bo add 
this irwage 
to the 

drawable- 
nodpi -Polder. 
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design support library 


Use a nested scroll view to make layout content scrollable 

We’ll allow the user to scroll the contents of TopFragment using a 
nested scroll view. This kind of view works just like a normal scroll 
view, except that it enables nested scrolling. This is important because 
the coordinator layout only listens for nested scroll events. If you use ^ 
a normal scroll view in your layout, the toolbar won’t scroll when the 
user scrolls the content. 

You add a nested scroll view to your layout using code like this: 

<android. support .v4 .widget.NestedScrollView ^ 'The Nes-tedSdv-olll/iew domes -from 
android: layout_width="match_parent" Swppori Library, 

android: layout_height= M match_j?arent M > 

. . . — Y° u ddd any Views you wan-1 -the user -to be 

able -to sdroll -to -the Nes-ted£droll\/iew. 

</android.support.v4.widget.NestedScrollView > 


^not-her view "that enables nested 
scrolling is the redydler view- Vow'll find 
out bow -bo use ibis in the ne*t dhapter- 


You add any views you want the user to be able to scroll to the nested 
scroll view. If you just have one view, you can add this to the nested 
scroll view directly. If you want to scroll multiple views, however, 
these must be added to a separate layout inside the scroll view. This 
is because a nested scroll view can only have one direct child. As an 
example, here’s how you’d add two text views to a nested scroll view 
with the help of a linear layout: 


<android.support.v4.widget.NestedScrollView 
android:layout_width="match_parent n 
android:layout_height= n match_parent" > 


<LinearLayout -« 

... > 

CTextView 

. . . /> 


WaVa a L«aaaLay»t as a. ,«. r l.-* £o.W' 

>a»a ibko- sort Ji lay»t tab* jHj “ 

NastadSai-ollV'a. ta» o«ly ka»a o»t dn-aat aMd If v«" 
f „l »oaa tta. »aa «« ■» NastadStr<Jll/,a», m this tasa 
two TeK-tViews, you must put them in another layout tirst- 


CTextView 

... /> 

</LinearLayout> 


</android.support.v4.widget.NestedScrollView > 
Next we’ll update TopFragment’s layout so it uses a nested scroll view. 
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layout structure 


How well structure TopFragwent's layout 

We’re going to add a restaurant image and some text to 
TopFragment’s layout. Before we write the code, here’s a 
breakdown of how we’ll structure it. 


o 

e 

o 


We want the entire fragment to be scrollable. This means we need to 
put all the views in a nested scroll view. 

We’ll use two text views for the Bits and Pizzas company name and text. 
We’ll put these in a vertical linear layout with a white background. 

We want to display the linear layout containing the two text views on 
top of the image. We’ll do this by putting them both in a frame layout. 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


Putting this together, we’ll use a nested scroll view for our layout, 
and this will contain a frame layout. The frame layout will include 


two elements, an image view and a linear layout. The linear layout 
will contain two text views to display the company name and ethos. 


/K 


Well put everything 
lh a WestedSerolH/iew. ^ 


o 


TopFrag^ent 



Bits and Pizzas Q 

Since we opened our doors in 2017, Bits and Pizzas 
has built its reputation as one of America's best Italian- 
Digital restaurants. Some people believe eating out is 
about being with your friends and family. We believe 
that good food is best enjoyed while staring at your 
phone. 


Well use two Te^tl/iews 


This is an ImajeView. Wit 
want to display it behind 
the text- 


in a LineavLayowt to 
display the text- 


On the next page we’ll show you the full code for Jragmentjtop.xml. 
Once you’ve updated your code, we’ll take the app for a test drive. 
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The full code for fragnient_top.xwl 

Here’s the full code for fragment_top.xml\ update your code to match ours: 


design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


. . . s ,— We want the whole -fragment io be able fo stroll 

<android.support.v4.widget.NestedScrollView J 

xmlns:android="http://schemas.android.com/apk/res/android" 

xmlns:tools="http://schemas.android.com/tools" p 

android:layout_width="match_parent" 1 1 1 

android:layout_height="match_parent" 
tools:context="com.hfad.bitsandpizzas.TopFragment"> 

We're using a FrameLayoul because we want to 

i-L* l~± ... J._r Li . ■ . 


BitsAndPizzas 


<FrameLayout ^ position -the iex-t on -top o-P -the image- 

android:layout_width="match_parent" 
android:layout_height="wrap_content" > 


app/src/main 

HB 


MU 


<ImageView android:id="@+id/info_image" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:scaleType="centerCrop" 
android:src="Qdrawable/restaurant" 

android:contentDescription="@string/restaurant_image" /> 


layout 



fragment_top.xml 


<LinearLayout 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:layout_marginTop="4 Odp" 
android:layout_marginLeft="16dp" 
android:layout_marginRight="16dp" 
android:padding="16dp" 
android:background="#FFFFFF" 
android:orientation="vertical"> 


WeVe using a Lincav-Layout -to 
don-tain -the -text We Ye giving i-t a 
y/hi-te badkground, and -the margins 
will add spade around -the edges. 


<TextView 

android:textSize="32sp" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:text="@string/company_name" /> 


<TextView 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:text="@string/home_text" /> 
</LinearLayout> 

</FrameLayout> 

</android.support.v4.widget.NestedScrollView> 
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test drive 



Test drive the app 

When we run the app, TopFragment displays the new 
layout. When we scroll the content, the toolbar scrolls too. 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 

When you sdvoll -the don-tent uf, 
the toolbar sdv-olls wp too. 


-w 



Bits and Pizzas 


Since we opened our doors in 2017, Bits and Pizzas 
has built its reputation as one of America's best Italian- 
Digital restaurants. Some people believe eating out is 
about being with your friends and family. We believe 
that good food is best enjoyed while staring at your 
phone. 


Bits and Pizzas 


HOME PIZZAS PASTA STORES 


Bits and Pizzas 


Since we opened our doors in 2017, Bits and Pizzas 
has built its reputation as one of America’s best Italian 
Digital restaurants. Some people believe eating out is 
about being with your friends and family. We believe 
that good food is best enjoyed while staring at your 
phone. 


T 


This is TopFv-agmeft-t's sdv-ollable tonieni 


By allowing the toolbar to scroll, you free up more space for 
content. An added bonus is that you don’t have to write any 
activity or fragment code to control the toolbar’s behavior. 
All of the functionality came from using widgets from the 
Design Support Library. 
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design support library 


Add a collapsing toolbar to OrderActivity 

A variant of allowing your toolbar to scroll is the collapsing 
toolbar. A collapsing toolbar is one that starts off large, shrinks 
when the user scrolls the screen content up, and grows again 
when the user scrolls the screen content back down. You can even 
add an image to it, which disappears when the toolbar reaches 
its minimum height, and becomes visible again as the toolbar 
expands: 


v/ 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 



Please enter your name 


Please enter your name 


Please enter your order 


These ave bo*th £ol lapsing 
-toolbars, one plain and 
one wi-lh an image* 


you scroll -the main 
eon-ten-t, ihe Co \lapsing 
■toolbar shrinks and grows. 


Please enter your order 


Please enter your name 



Please enter your order 



OrderActivity to include a collapsing toolbar. 


First add some String resources 

Before we get started, we need to add some String resources to 
strings.xml that we’ll use in OrderActivity’s layout. Open 
strings.xml, then add the following resources: 


□ 

Bits And Pizzas 

app/src/main 

K3 


<string name= M order_name_hint M >Please enter your name</string> 
<string name="order_details_hint">Please enter your order</string> 

We’ll start updating the layout on the next page. 



values 



strings.xml 


you are here ► 
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collapsing toolbar 


How to create a plain collapsing toolbar 

You add a collapsing toolbar to your activity’s layout using the 
collapsing toolbar layout from the Design Support Library. In order 
for it to work, you need to add the collapsing toolbar layout to an app 
bar layout that’s included within a coordinator layout. The collapsing 
toolbar layout should contain the toolbar you want to collapse. 

As the collapsing toolbar needs to respond to scroll events in a separate 
view, you also need to add scrollable content to the coordinator layout, 
for example using a nested scroll view. 

Here’s an overview of how you need to structure your layout file in 
order to use a collapsing toolbar: 

<android.support.design.widget.CoordinatorLayout 


<android.support.design.widget.AppBarLayout 



Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


<android.support.design.widget.CollapsingToolbarLayout 


Yyow add the CollafsmjToolbavLayou't 
bo an A??BavLayoi/-t, which srb 
inside a CoordmaWUyout The 
Collapsin^Toolbav-Layoui Contains -the Toolbar. 

</android.support.design.widget.CollapsingToolbarLayout> 


<android.support.v7.widget.Toolbar 

... /> 


</android.support.design.widget.AppBarLayout> 


<android.support.v4.widget.NestedScrollView 

. . . > 


. . . ^—-The scrollable dorrteirrl ^oes here- 

</android.support.v4.widget.NestedScrollView> 
</android.support.design.widget.CoordinatorLayout> 


In addition to structuring your layout in a particular way, there are 
some key attributes you need to use to get your collapsing toolbar to 
work properly. We’ll look at these next. 
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Nested scroll view attributes 

As before, you need to tell the coordinator layout which view you expect the user 
to scroll. You do this by setting the nested scroll view’s layout_behavior 
attribute to string/appbar_scrolling_view_behavior 

<android.support.v4.widget.NestedScrollView 


app:layout_behavior="©string/appbar_scrolling_view 


design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


This is -the same as when we 
ev-ea-ted a serollm^ -toolbar. 

behavior" > 



Collapsing toolbar layout attributes 

You want the collapsing toolbar layout to collapse and expand in response 
to scroll events, so you need to set its layout_scrollFlags attribute to 
control this behavior. In our case, we want the collapsing toolbar layout to 
collapse until it’s the size of a standard toolbar, so we’ll set the attribute to a 
value of "scroll | exitUntilCollapsed": 

<android. support. design .widget. CollapsingToolbarLayout y^ni the 

-'toolbar to Collapse un-til 

app: layout_scrollFlags="scroll | exitUntilCollapsed" > its done Collapsing 


App bar layout attributes 

As before, you apply a theme to your app bar layout to control the appearance 
of its contents. You also need to specify a height for the contents of the app 
bar layout. This is the maximum height the collapsing toolbar will be able to 
expand to. In our case, we’ll apply a theme of "@style/ThemeOverlay. 

AppCompat. Dark. ActionBar" as before and set the height to 300dp: 

<android.support.design.widget.AppBarLayout 
android:layout_width="match_parent" 

android:layout_height="300dp —'This is *tbc maximum height of -the Collapsing “toolbar* 

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > 

Toolbar attributes 

If you have items on your toolbar such as an Up button, these may scroll off the 
screen as the toolbar collapses. You can prevent this from happening by setting 
the layout_collapseMode attribute to "pin": 

<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
app:layout_collapseMode="pin" /> ^- 


This pins anything tha^s on the 
■toolbar, such as the Up button, 
to the top o-f the screen- 

you are here ► 
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layout code 


The full code to add a collapsing 
toolbar to activitY_order.xml 



Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


Here’s how to add a collapsing toolbar to OrderActivity’s layout. 
Replace your existing code for activity_order.xml with the code below: 


□ 

Bits And Pizzas 


<?xml version="l.0" encoding="utf-8"?> 

<android.support.design.widget.CoordinatorLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 

android: id="@+id/coordinator" --- We ve added an It) to "the 

android: layout_width="match_parent" Coo\rdinato\rLayout> as well 
android:layout_height="match_parent" > 


HU 

app/sre/main 

40 


' - v/ w- II 

y\ted it later in the chapter. 


Co _ 

LO 

layout 


activity_order.xml 


<android.support.design.widget.AppBarLayout 
android:layout_width="match_parent" 
android:layout_height="300dp" 

android:theme="Qstyle/ThemeOverlay.AppCompat.Dark.ActionBar" > 

-This is the 

<android. support. design . widget. CollapsingToolbarLayout CollapsinjToolbarLayout- 

It needs to be within an 

android:layout width="match parent" o' 0 , 

AppBavLayout 

android:layout_height="match_parent" 

app:layout_scrollFlags="scroll|exitUntilCollapsed" > 


<android. support. v7 . widget. Toolbar CollapsmgToolbav-Layoui 

ton tains a toolbav. 

android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
app:layout_collapseMode="pin" /> 


</android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 


The Code 
Continues 
on the 
went page- 
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The activity_order.xml code (continued) 



design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


<android.support.v4.widget.NestedScroilView 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
app:layout behavior="©string/appbar scrolling view behavior" > 


The NestedStv-ollView Contains 
•the Content we want the usev 
to be able to sdvoll- 


, r 

We ire usihg a 
LiheamLayout 
to position 
the scrollable 
^Ohteht- 


<LinearLayout 


android:layout_width= n match_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" 
android:padding = "16dp" > 

<EditText 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:hint="@string/order_name_hint M /> 

<EditText 

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:hint="@string/order_details_hint M /> 


</LinearLayout> 

</android.support.v4.widget.NestedScrollView> 
</android.support.design.widget.CoordinatorLayout> 


□ 

BitsAndPizzas 

HU 

app/src/main 

HB 

res 

MB 

layout 


activity_order.xml 



N 


V 'A u 13:21 1 

<- 

Create Order 




Let’s see what happens when we run the app. 


you are here ► 
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test drive 



Test drive the app 

When we run the app, OrderActivity displays the new layout, 
including the collapsing toolbar. The collapsing toolbar starts off 
large, and collapses as we scroll the content. 



Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


This is -the -toolbar vjlier it’s i.ol lapsed 
/ 


This is -the 
toolbar 
v/hen i-t^s 
expanded- 



You can add images to collapsing toolbars too 


The collapsing toolbar we’ve created so far is quite plain. It has 
a plain background, which grows and shrinks as we scroll the 
content in the activity. 


We can improve this by adding an image to the collapsing toolbar. 
We’ll display the image when the collapsing toolbar is large, and 
when it shrinks we’ll display a standard toolbar instead: 


This is the 
same Collapsing 
toolbar, 
e*Cept were 
going to add 
an image to it- 



H * % u 13:22 

<- Create Order 


Please enter your order 


Please enter your name 


Please enter your name 


Please enter your order 
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How to add an image to a collapsing toolbar 

We’re going to update the collapsing toolbar we just created so that it 
includes an image. For convenience, we’ll use the same image that we 
added to TopFragment. 

You add an image to a collapsing toolbar by adding an I mage View 
to the CollapsingToolBarLayout, specifying the image you 
want to use. As an optional extra, you can add a parallax effect to the 
I mage View so that the image scrolls at a different rate than the rest 
of the toolbar. You do this by adding a layout_collapseMode 
attribute to the ImageView with a value of "parallax". 



design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


We want to use a drawable named “restaurant” for our image. Here’s 
the code we need: 


<android.support.design.widget.Co1lapsingToolbarLayout 

. . . > 


□ 

BitsAndPizzas 

4 H 


< ImageView 

android:layout_width="match_j?arent" 
android:layout_height="match_j?arent 
android:scaleType="centerCrop"^ 


HU 


We've tvopping Ibe ' ,r " a 5 e L 
til inside He Af-pBavLayout 


res 


android:src="@drawable/restaurant" 

android:contentDescription= M @string/restaurant_image 
app:layout_collapseMode="parallax" /> 

A 

<Toolbar T h,s ^ is °^ onal H a ^ds pavalla* 

dhirwatioh so tnc moves a-fc a 

••• > di+tevenl vale Han He scrollable Conlenl 


MT 3 

layout 


activity_order.xml 


</android.support.design.widget.CollapsingToolbarLayout> 

By default, when the toolbar is collapsed, it will continue to display 
the image as its background. To get the toolbar to revert to a plain 
background color when it’s collapsed, you add a contentScrim 
attribute to the Col laps ingToolbarLayout, setting it to the value 
of the color. We want our toolbar to have the same background color as 
before, so we’ll set it to " ?attr/ color Primary": 

<android.support.design.widget.CollapsingToolbarLayout 


app:layout_scrollFlags="scroll|exitUntilCollapsed" 

app: contentScrim="?attr/colorPrimary" > | me d y, a ^ es He loolbav batk lo 

ils deti/ll tolov wben il s Collapsed 

Those are all the changes we need, so we’ll update the code 
on the next page, and then take it for a test drive. 
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layout code 


The updated code for activity_order.xml 

Here’s the updated code for activity_ord.er.xml to add an image to the 
collapsing toolbar (update your version to match our changes in bold): 



Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.CoordinatorLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android: id="@+id/coordinator" BitsAndPizzas 

android:layout_width="match_parent" HD 

android:layout_height="match_parent" > app/src/main 


□ 


<android.support.design.widget.AppBarLayout 
android:layout_width="match_parent" 
android:layout_height="300dp" 

android:theme="Qstyle/ThemeOverlay.AppCompat.Dark.ActionBar" 


4D 


Co 

HD 

layout 


l</Xmll 

activity_order.xml 


These lines add 
ah image -to -the 
Collapsing -toolbar. 
li uses snazzy 

parallax anima-tioh. 


<android.support.design.widget.CollapsingToolbarLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
app:layout_scrollFlags="scroll|exitUntilCollapsed" 

app: contentScrim=" ?attr/colorPrimary" > ^^Th’is line Changes -the -toolbar 

background >wheh its dollapsed. 

< Image View 

android:layout_width= M match_j?arent M 
android:layout_height= M match_parent" 
android:scaleType="centerCrop" 
android:src="@drawable/restaurant" 

android:contentDescription="@string/restaurant_image" 
app:layout_collapseMode="parallax" /> 


<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
app:layout_collapseMode="pin" /> 


</android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 


The Code £oh-tihues 
on -the next page. ^ 
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The activity_order.xnil code (continued) 

<android.support.v4.widget.NestedScrollView 
android:layout_width="match_parent" 
android:layout_height= M match_parent" 

app:layout_behavior="©string/appbar_scrolling_view_behavior" > 

□ 

BitsAndPizzas 

■ 

app/src/main 

4U 

res 

layout^ 


</android.support.v4.widget.NestedScrollView> 
</android.support.design.widget.CoordinatorLayout> 

Let’s see what the app looks like when we run it. 

K 


design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


activity_order.xml 


Test drive the app 


When we run the app, OrderActivity’s collapsing toolbar 
includes an image. As the toolbar collapses, the image fades, 
and the toolbar’s background changes to its original color. 
When the toolbar is expanded again, the image reappears. 


The toolbar ehan^es 
£olo\r when its Collapsed- 


The 

appeals on 
the toolbar. 
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fabs and snackbars 


FAPs and snackbars 

There are two final additions we’re going to make to 
OrderActivity from the Design Support Library: a FAB 
and a snackbar. 

A FAB is a floating action button. It’s a circled icon that 
floats above the user interface, for example in the bottom-right 
corner of the screen. It’s used to promote actions that are so 
common or important that you want to make them obvious to 
the user. 



Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 

This is a FAB that 
appears in the google 
• Calendar app- It -floats in 
the bottom-right Corner 
of the screen, and you 
use it to add events. 


A snackbar is like a toast except that you can interact with 
it. It’s a short message that appears at the bottom of the screen 
that’s used to give the user information about an operation. 
Unlike with a toast, you can add actions to a snackbar, such as 
an action to undo an operation. 

Well add a FAP and snackbar to OrderActivity 

We’re going to add a FAB to OrderActivity. When the user 
clicks on the FAB, we’ll display a snackbar that shows a message 
to the user. In the real world, you’d want to use the FAB to 
perform an action such as saving the user’s pizza order, but 
we’re just going to focus on showing you how to add the widgets 
to your app. 



This is the snackbar that appears in the 
Chrome app when you've just closed a web 
page, you can reopen the page by clicking 
on the Undo action in the snackbar. 


Here’s what the new version of OrderActivity will look like: 






Please enter your order 


please enter your name 


wc £.li£k oy \ -tbc FAB> 
snackbar gets displayed- 
fhen it appears, the rAB 
,oves up out of the way- 


Your order has been updated 


UNDO 
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Add the icon for the FAP 

We’ll start by adding an icon to our project to display on the FAB. You 
can either create your own icon from scratch or use one of the icons 
provided by Google: https://design.google.com/icons/ . 

We’re going to use the “done” icon ic_done_white_24dp, and we’ll 
add a version of it to our project’s drawable* folders, one for each screen 
density. Android will decide at runtime which version of the icon to use 
depending on the screen density of the device. 

First, switch to the Project view of Android Studio’s explorer, highlight 
the app/src/main/res folder in your project, then create folders called 
drawable-hdpi , drawable-mdpi , draw able-xhdpi, drawable-xxhdpi , and 
draw able-xxxhdpi if they don’t already exist. Then go to http://tinyurl.com/ 
HeadFirstAndroidDonelcons , and download ic_done_white_24dp.png Bits and 
Pizzas images. Add the image in the drawable-hdpi folder to the drawable- 
hdpi folder in your project, then repeat this process for the other folders. 

How to add a FA& to your layout 

You add a FAB to your layout using code like this: 

<android.support.design.widget.CoordinatorLayout ...> 



design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 



VVcVc 

{jO use -this 
idOK OY\ ouv 

m■ 


The dode -for addmj a FAB B 

_similar bo the dod t -for add'm^ 

. ^ an ImayButW Thats bedause 

<android.support.design.widget.FloatingActionButton J 


android:layout_width= M wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity= M end|bottom" 
android:layout_margin="16dp" 
android:src="@drawable/ic_done_white 
android:onClick="onClickDone" /> 


2 4 dp" 


</android.support.design.widget.CoordinatorLayout> 


FloatingActionButton is d 
subdlass o-f Ima^eButton. 


It youVe using -the FAB in an 
activity you dan use the onClidk 
attvibute to spedi-fy which method 
should be called when it’s clicked- 


The above code adds a FAB to the bottom-end corner of the screen, with 
a margin of 16dp. It uses the src attribute to set the FAB’s icon to the 
ic_done_white_2 4dp drawable. We’re also using the FAB’s onClick 
attribute to specify that the onClickDone () method in the layout’s activity 
will get called when the user clicks on the FAB. We’ll create this method later. 

You usually use a FAB inside a CoordinatorLayout, as this means that 
you can coordinate movement between the different views in your layout. In 
our case, it means that the FAB will move up when the snackbar appears. 

On the next page we’ll show you the code for Order Activity’s layout. 


The material design 
guidelines recommend 
using no more than 
one FAB per screen. 
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layout code 


v/ 

V 


The updated code for activity_order.xwl 

Here’s the updated code for activity_order.xml (update your version to 

match our changes in bold): , , . , C 

8 ' We've no-t thawed a«y ok 

-the tode ov\ -this pay 

<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.CoordinatorLayout 

xmlns:android="http://schemas.android.com/apk/res/android 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/coordinator" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


Bits And Pizzas 


□ 

Pizz 

HB 

app/sre/main 

'-m 


<android.support.design.widget.AppBarLayout 

I CO ^ 

android:layout_width="match_parent" |_T 

android:layout_height="300dp" layout 

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > I— 

activity_order.xml 


<android.support.design.widget.CollapsingToolbarLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
app:layout_scrollFlags="scroll|exitUntilCollapsed" 
app:contentScrim="?attr/colorPrimary" > 


<ImageView 

android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:scaleType="centerCrop" 
android:src="@drawable/restaurant" 

android:contentDescription="Qstring/restaurant_image" 
app:layout_collapseMode="parallax" /> 


<android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
app:layout_collapseMode="pin" /> 

</android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 


The Code £ohtmues 
oy \ the *ext page- ^ 
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v/ 

V 


The activity_order.xwl code (continued) 

<android.support.v4.widget.NestedScrollView 
android:layout_width="match_parent" 
android:layout_height= n match_parent M 

app:layout_behavior="@string/appbar_scrolling_view_behavior" > 

□ 

BitsAndPizzas 

L o 

app/sre/main 

MB 


design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


<LinearLayout 


</LinearLayout> 


</android.support.v4.widget.NestedScrollView> 

<android.support.design.widget.FloatingActionButton 
android:layout_width= M wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="end|bottom" 
android:layout_margin="16dp" 
android: src=" @drawable/ic_done_white_24dp" 
android:onClick="onClickDone" /> 


VVcVc adding 
the m to the 
Coov-d'matovLayout 
so that it will 
move out the way 
when a snadkbar 
gets displayed- 


res 


4T3 

layout 


activity_order.xml 


</android.support.design.widget.CoordinatorLayout> 


Add the owClickPoweO method to OrderActivity 

Now that we’ve added a FAB to Order Activity’s layout, we 
need to write some activity code to make the FAB do something 
when it’s clicked. You do this in the same way that you would 
for a button, by adding the method described by the FAB’s 
onClick attribute to your activity code. 


In our case, we’ve given the onClick attribute a value 
of "onClickDone", so this means we need to add an 
onClickDone () method to OrderActivity.java: 

public void onClickDone(View view) { 

//Code that runs when the FAB is clicked 


□ 

Pizz 

m 


BitsAndPizzas 


Now we’re going to write some code to display a snackbar when 
the user clicks on the FAB. 


You don't have *to 

_add “this method 

^ now; you dan wait 
until we show you 
the ‘full dode a -few 
pages ahead. 


app/sre/main 

MB 

java_ 

LQ 

com. hfad. bitsandpizzas 


O rd e r Ac ti v i ty.j a va 
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snackbar 


How to create a snackbar 

As we said earlier in the chapter, a snackbar is a bar that appears at 
the bottom of the screen that displays a short message to the user. It’s 
similar to a toast, except that you can interact with it. 

To create a snackbar, you call the Snackbar . make () method. 

This method takes three parameters: the View you want to hold the 
snackbar, the text you want to display, and an int duration. As an 
example, here’s the code for a snackbar that appears on the screen for 
a short duration: 



Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


CharSequence text = "Hello, I'm a Snackbar!"; 
int duration = Snackbar.LENGTH_SHORT; 

Snackbar snackbar = Snackbar.make(findViewByld(R 

In the above code, we’ve used a view called coordinator to hold 
the snackbar. This view will usually be your activity’s coordinator 
layout so that it can coordinate the snackbar with other views. 

We’ve set the snackbar’s duration to LENGTH_SHORT, which 
shows the snackbar for a short period of time. Other options are 
LENGTH_LONG (which shows it for a long duration) and LENGTH_ 

INDEFINITE (which shows it indefinitely). With any of these options, 
the user is able to swipe away the snackbar so that it’s no longer 
displayed. 

You can add an action to the snackbar by calling its set Act ion () 
method. This can be useful if, for example, you want the user 
to be able to undo an operation they’ve just performed. The 
set Act ion () method takes two parameters: the text that should 
appear for the action, and a View. onClickListener () . Any ^/ou pass the setAdtionO method 

code you want to run when the user clicks on the action should “the text “that should appear -for “the 

appear in the listener’s onClick () event: adtion, and a \/iew.0nClidkListener- 

\h 

snackbar.setAction("Undo", new View.OnClickListener() { 

@Override 

public void onClick(View view) { 

//Code to run when the user clicks on the Undo action 

} , 
n . 7* he « d s F*i-fy what should happen 

use*- dlidks on the Undo adtion. 

Once you’ve finished creating the snackbar, you display it using its 
show () method: 

snackbar.show(); 


.id.coordinator, text, duration); 

t 

|£ you want to display a string 
resource, you dan pass in the 
vesourde If) instead ot the text- 
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Poo] puzz]e 


Your goal is to make OrderActivity's 
onClickDone () method display a 
snackbar. The snackbar should include 
an action, "Undo", which shows a toast 
when clicked. Take code snippets from 
the pool and place them into the blank 
lines in the code. You may not use the 
same snippet more than once, and you 
won't need to use all the snippets. 


public void onClickDone(View view) { 

CharSequence text = "Your order has been updated"; 
int duration =.; 

Snackbar snackbar = Snackbar. (findViewByld(R.id.coordinator), , ); 

snackbar.setAction("Undo", new View.OnClickListener() { 

@Override 

public void onClick(View view) { 

Toast toast = Toast. OrderActivity. this, "Undone!",.); 

toast..; 

} 

}) ; 

snackbar..; 

} 


Note: each thing from 
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solution 



Poo] plizzjc ^ajuflall 

Your goal is to make OrderActivity's 
onClickDone () method display a 
snackbar. The snackbar should include 
an action, "Undo", which shows a toast 
when clicked. Take code snippets from 
the pool and place them into the blank 
lines in the code. You may not use the 
same snippet more than once, and you 
won't need to use all the snippets. 


public void onClickDone(View view) { 

CharSequence text = "Your order has been updated"; 
int duration = Snackbar . LENGTH^SHORT ; 

Snackbar snackbar = Snackbar. make (findViewByld(R.id.coordinator), text , duration ); 
snackbar.setAction("Undo", new View.OnClickListener() { 

QOverride 

public void onClick(View view) { 

Toast toast = Toast. makeText OrderActivity. this, "Undone !", Toast . LENGTH_SHORT ) 

toast. showO 

} 


}) ; 

snackbar. show() 
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The full code for OrderActivity.java 

Here’s our full code for OrderActivity.java , including the code to add a snackbar 
with an action. Update your version of the code to match our changes (in bold): 

package com.hfad.bitsandpizzas; 



design support library 

Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 
import android.support.v7.app.ActionBar; 

import android. view. View; 1 — 

import android.support.design.widget.Snackbar; 
import android.widget.Toast; —^ 


We Ye usinj -these new classes, 
so you need “to umpov-t the**- 


public class OrderActivity extends AppCompatActivity { 


□ 

Bits And Pizzas 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_order); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar(toolbar); 

ActionBar actionBar = getSupportActionBar(); 
actionBar.setDisplayHomeAsUpEnabled(true); 


Ha 

app/src/main 

nn 


java_ 

v 

com.hfad.bitsandpizzas 



OrderActivity.java 


_This method jets tailed when 

^ the use*- clicks on the 1AB- 

public void onClickDone (View view) { 

CharSequence text = "Your order has been updated"; 

int duration = Snackbar.LENGTH_SHORT; 

Create ^ x 

t^Snackbar snackbar = Snackbar.make(findViewByld(R.id.coordinator), text, duration); 

snatkba*-. snackbar • setAction ("Undo" , new View. OnClickListener () { <- a * a ^,on to the snatkba*-. 
@Override 


public void onClick(View view) { 

Toast toast = Toast.makeText(OrderActivity.this, "Undone!' 

toast. Show (); ^ ^e user clicks on the 

} snadkbav s action, display a -fcoas-t. 


Toast.LENGTH SHORT) 


}); 

snackbar.show(); 


Display the snadkbav-. 
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test drive 



Test drive the app 

When we run the app, a FAB is displayed in Order Activity. 
When we click on the FAB, a snackbar is displayed and the 
FAB moves up to accommodate it. When we click on the Undo 
action on the snackbar, a toast is displayed. 


v 

v 

V 

-Hv] 


Scrolling toolbar 
Collapsing toolbar 
FAB 

Snackbar 



Please enter your order 


Here's the FAB 
we Created > 


please enter your name 


Please enter your order 


Me* you dlidk oy\ -the 

FAB> a snadkbav- is 
displayed The FAB 

moves up ou*t o( -the way- 

£ ® 


Your order has been updated 


jPlease enter your name 


Please enter your order 


When we click on the 
snackbar’s Undo action) 
a toast is displayed- 

V 


please enter your name 





As you can see, snackbars have a lot in common with toasts, as 
they’re both used to display messages to the user. But if you 
want the user to be able to interact with the information you’re 
showing them, choose a snackbar. 
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design support library 



Your Android Toolbox 

You’ve got Chapter 12 under 
your belt and now you’ve 
added the Design Support 
Library to your toolbox. 


Yow ta* download 
iKe -full tode -for 
■tKe chapter £vow< 
h-tifs://-tiW/urUom/ 

HeadPirstAndroid- 



BULLET POINTS 


■ Enable swipe navigation using a view 
pager. 


Use a coordinator layout to coordinate 
animations between views. 


You tell a view pager about its pages by 
implementing a fragment pager adapter. 

Use the fragment pager adapter’s 
getCount () method to tell the view 
pager how many pages it should have. Use 
its getl tern () method to tell it which 
fragment should appear on each page. 

Add tab navigation by implementing a 
tab layout. Put the toolbar and tab layout 
inside an app bar layout in your layout 
code, then attach the tab layout to the view 
pager in your activity code. 

The tab layout comes from the Android 
Design Support Library. This library 
helps you implement the material design 
guidelines in your app. 


■ Add scrollable content the coordinator 
layout can coordinate using a nested 
scroll view. 

■ Use a collapsing toolbar layout to add 

a toolbar that collapses and grows in 
response to user scroll actions. 

■ Use a FAB (floating action button) to 
promote common or important user 
actions. 

■ A snackbar lets you display short 
messages that the user can interact with. 
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13 recycle? VieWs and card VieWs 


, 6ef Recycling + 



You’ve already seen how the humble list view is a key part of 

most apps. But compared to some of the material design components we’ve seen, 
it’s somewhat plain. In this chapter, we’ll introduce you to the recycler view, a more 
advanced type of list that gives you loads more flexibility and fits in with the material 
design ethos. You’ll see how to create adapters tailored to your data, and how to 
completely change the look of your list with just two lines of code. We’ll also show you 
how to use card views to give your data a 3D material design appearance. 


this is a new chapter 
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fancier lists 


There's still work to do on the Pits and Pizzas app 


In Chapter 12, we updated the Bits and Pizzas app to include 
components from the Design Support Library, including a tab layout, 
FAB, and collapsing toolbar. We added these to help users navigate to 
places in the app more easily, and to implement a consistent material 
design look and feel. If you recall, material design is inspired by paper 
and ink, and uses print-based design principles and movement to 
reflect how real-world objects (such as index cards and pieces of paper) 
look and behave. But there’s one key area we didn’t look at: lists. 

We’re currently using list views in Piz zaFragment, 
PastaFragment, and StoresFragment to display the available 
pizzas, pasta, and stores. These lists are very plain compared with the 
rest of the app, and could do with some work to give them the same 
look and feel. 

Another disadvantage of list views is that they don’t implement nested 
scrolling. In Chapter 12, we made MainActivity’s toolbar scroll in 
response to the user scrolling content in the activity’s fragments. This 
currently works for Top Fragment, as it uses a nested scroll view. As 
none of the other fragments use nested scrolling, however, the toolbar 
remains fixed when the user tries to scroll their content. 

To address these issues, we’re going to change Piz zaFragment to 
use a recycler view. This is a more advanced and flexible version 
of a list view that implements nested scrolling. Instead of displaying 
just the names of each pizza in a list view, we’ll use a recycler view to 
display its name and image: 


N 

0 17:04 W 



Bits and Pizzas 

+ 

A 

HOME PIZZAS 

PASTA STORES 



This is the durrent 
PizzaFragment. l-t incudes a list 
o-f pizzas, but it looks <\uite plain. 


This is the 

re£ytler view weVe —^ 
30 'mg to add to 

PizzaFragment- 



Bits and Pizzas 


HOME PIZZAS PASTA STORES 


Diavolo 


^ VVhen you stroll the 
retytler view, the 
toolbar moves up. This 
matches the behavior 
o£ TopFragment- 
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recycler views and card views 


Recycler views from 10,000 feet 

Before we dive into the code, let’s take a look at how recycler views 
work. As a re cycler view is more flexible than a list view, it takes a 
lot more setting up. 

Like list views, recycler views efficiently manage a small number 
of views to give the appearance of a large collection of views that 
extend beyond the screen. They allow you greater flexibility about 
how the data is displayed than list views do. 

A recycler view accesses its data using an adapter. Unlike a list 
view, however, it doesn’t use any of the built-in Android adapters 
such as array adapters. Instead, you have to write an adapter 
of your own that’s tailored to your data. This includes 
specifying the type of data, creating views, and binding the data to 
the views. 

Items are positioned in a recycler view using a layout manager. 
There are a number of built-in layout managers you can use that 
allow you to position items in a linear list or grid. 

Here’s a diagram of all those elements put together: 


The redydler view uses 
•the adapter to display 
the data- It includes 
a layout manager to 
syetity tow the data 
should be positioned 

/ T 

you need -to write your own 
adapter. This is where most 
o-f -the work is. 


This is *the 
data that’s -—^ 
used m the 
redydler view. 



Recycler 
-A/iew 


In our particular case, we’re going to create a recycler view to 
display pizza names and images. We’ll go through the steps for how 
to do this on the next page. 
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steps 


Here's what we're going to do 

There are five main steps we’ll go through to get the recycler 
view working: 


© 

o 

© 


Add the pizza data to the project. 

We’ll add images of the pizzas to the app, along with a new 
Pizza class. This class will be the recycler view’s data source. 

Create a card view for the pizza data. 

We’re going to make each pizza in the recycler view look as 
though it’s displayed on a separate card. To do this, we’ll use a 
new type of view called a card view. 

Create a recycler view adapter. 

As we said on the previous page, when you use a recycler view you 
need to write your own adapter for it. Our adapter needs to take 
the pizza data and bind each item to a card view. Each card will 
then be able to be displayed in the recycler view. 



These ave eavd views 
displaying pizza data. 


© 

© 


Add a recycler view to PizzaFragment. 

After we’ve created the adapter, we’ll add the recycler 
view to PizzaFragment. We’ll make it use the 
adapter, and use a layout manager to display pizza data 
in a two-column grid. 

Make the recycler view respond to clicks. 

We’ll create a new activity, PizzaDetailActivity, 
and get it to start when the user clicks on one of the 
pizzas. We’ll display details of the pizza in the activity. 


This is 

PiziaPe-tailAd-tivi-ty. 



The first thing we’ll do is add the pizza data. 



We’re going to update 
the Bits and Pizzas app 
in this chapter, so open 
your Bits and Pizzas 
project in Android Studio. 
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Add the pizza data 


We’ll start by adding the pizza images to the Bits and Pizzas 
project. Download the files diavolo.jpg and funghi.jpg from https:// 
git.io/v9oet, then add them to the folder app/src/main/res/ 
drawable-nodpi. This folder should already exist in your project, as 
we added an image to it in Chapter 12. 

Add the Pizza class 


recycler views and card views 

Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


These ave ihe 
pizza images. 


We’ll get our data from a Pizza class, which we need to add. The ^ 
class defines an array of two pizzas, where each pizza has a name and 
image resource ID. Switch to the Project view of Android Studio’s 
explorer, highlight the com. hf ad. bitsandpizzas package in 
the app/src/main/java folder, then go to File—>New...—Java class. 
When prompted, name the class “Pizza” and make sure the package 
name is com. hf ad. bitsandpizzas. Finally, replace the code in 
Pizza java with the following: 

package com.hfad.bitsandpizzas; 


In a veal app, 
y/c mi^ht vse a 
database £ov this. 
WcVe usinj a Java 
dlass heve -for 
simplicity • 



public class Pizza { 

private String name; 
private int imageResourceld; 


£ach Pizza has a name and ima$e vesouvee 
|p. The image vesouvde IP vetevs b> ihe 
pizza images we added i© ihe pvojedi above- 


public static final Pizza[] pizzas = { 

new Pizza("Diavolo", R.drawable.diavolo), 
new Pizza("Funghi" , R.drawable.funghi) 


}; 




The Pizza eons-tv-uetov 


private Pizza(String name, int imageResourceld) { 
this.name = name; 

this.imageResourceld = imageResourceld; 

} 

public String getName() { 

return name; r n 

>•'These ave $ettevs tov the 

* / pvivate vaviables. 

public int getImageResourceId() { 
return imageResourceld; 

} 


□ 

BitsAndPizzas 

413 

app/sre/main 

4n 


java 


40 


com, hfad. bi tsand pizzas 


Pizza .java 
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add libraries 


Pisplay the pizza data in a card 

The next thing we need to do is define a layout for the pizza data. This layout 
will be used by the recycler view’s adapter to determine how each item in the 
recycler view should look. We’re going to use a card view for this layout. 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


A card view is a type of frame layout that lets you display information on 
virtual cards. Card views can have rounded corners and shadows to make it 
look as though they’re positioned above their background. If we use a card 
view for our pizza data, each pizza will look as though it’s displayed on a 
separate card in the recycler view. 



These are £ard views. Well 
eards -to display -the pizza 
data m the retyder view. 


use 



Add the CardView and RecyclerView Support Libraries 

Card views and recycler views come from the CardView and RecyclerView 
v7 Support Libraries, respectively, so before we can go any further, you need 
to add them to your project as dependencies. 


In Android Studio go to File—^Project Structure. In the Project Structure 
window, click on the “app” option and switch to the Dependencies tab. Then 
click on the “+” button at the bottom or right side of the screen, choose the 
“Library dependency” option, and add the CardView Library. Repeat these 
steps to add the RecyclerView-v7 Library, then click on the OK button to 
save your changes. 


Make sure you add bo-th libraries. 



Now that you’ve added the Support Libraries, we’ll create a card view 
that we can use for our pizza data. 
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recycler views and card views 


How to create a card view 

We’re going to create a card view that displays an image with a 
caption. We’ll use it here for the name and image of individual pizzas, 
but you could also use the same layout for different categories of data 
such as pasta or stores. 

You create a card view by adding a <CardView> element to a 
layout. If you want to use the card view in a recycler view (as we 
do here), you need to create a new layout file for the card view. Do 
this by highlighting the app/src/main/res/layout folder, and choosing 
File—>New—^Layout resource file. When prompted, name the layout 
“card_captioned_image”. 


Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


You add a card view to your layout using code like this: 

<android. support.v 7 .widget.CardView This de-fines “the Cdv-d\/ iew 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:card_view="http://schemas.android.com/apk/res-auto" 
android:id="@+id/card_view" 

android: layout_width="match_j?arent" BitsAndPizzas 

android:layout_height=" 20 Odp" 
android:layout_margin=" 4 dp" 

Setting ~>card_ view:cardElevation=" 2 dp" 

cl car d_view: cardCornerRadius=" 4 dp"> —This gives -the CdvdVi 

gives it h , , ^ dtd 

a drop ... y £-— V°w add any views you want to 

shadow. be displayed to the Cardl/iew. 

</android.support.v 7 .widget.CardView> 


□ 


4a 

app/sre/main 

41 


lew 


4H3 

layout 


card_captioned_ 

image.xml 


In the above code, we’ve added an extra namespace of: 

xmlns:card_view="http://schemas.android.com/apk/res-auto" 


so that we can give the card rounded corners and a drop shadow to 
make it look higher than its background. You add rounded corners 
using the card_view: cardCornerRadius attribute, and the 
card_view: cardElevation attribute sets its elevation and adds 
drop shadows. 

Once you’ve defined the card view, you need to add any views you 
want to display to it. In our case, we’ll add a text view and image view 
to display the name and image of the pizza. We’ll show you the full 
code for this on the next page. 


you are here ► 


543 



layout code 


The full card_captioned_image.xml code 

Here’s the full code for card_captioned_image.xml (update your 
version of the file to match ours): 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


<?xml version="1.0" encoding="utf-8"?> 

<android.support.v7.widget.CardView 

xmlns:android= M http://schemas.android.com/apk/res/android" 
xmlns:card_view= M http://schemas.android.com/apk/res-auto" 
android:id="@+id/card_view" 
android:layout_width="match_j?arent" 

android:layout_height="200dp"^^_^The tard view will be as wide as its 


□ 


BitsAndPizzas 


Mrs 

app/sre/main 

ma 


android:layout_margin="5dp" 
card_view:cardElevation="2dp" 
card_view:cardCornerRadius="4dp"> 


parent allows, and 2 - 00 dp bi^lv 


MU 

layout 


card_ 

captioned_ 

image.xml 


<LinearLayout 

android: layout_width="match_j?arent"^-- We've put the (magel/iew and 7e*t\/iew 

android:layout_height="match_j?arent" m a Li near Layout, as the Ca\rdl/iew ean 

android:orientation="vertical"> tia ' /e 


<ImageView android:id="@+id/info_image" 
android:layout_height="Odp" 
android:layout_width="match_j?arent" 


The ima$e will be as wide as the 
Cav-d\/iew allows. WcVe usin$ denterCrop 
to make sure the ima$e stales uniformly. 


android:layout_weight="1.0" 
android:scaleType="centerCrop"/> 

The Ca\rdl/iew Contains 

<Textview Imajel/iew and a 7e*t\/iew. 

android: id="@+id/info_text" 
android:layout_marginLeft="4dp" 
android:layout_marginBottom="4dp" 
android:layout_height="wrap_content" 
android:layout_width="match_j?arent"/> 
</LinearLayout> 

</android.support.v7.widget.CardView> 

Note that the above layout doesn’t explicitly mention pizza 
data. This means we can use the same layout for any data 
items that consist of a caption and an image, such as pasta. 



This is what the Cardl/iew 
will look like when data's been 
a dded to it- Well do this via 
the redydler view's adapter. 


Now that we’ve created a layout for the card views, we’ll 
move on to creating the recycler view’s adapter. 
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How our recycler view adapter will work 

As we said earlier, when you use a recycler view in your app, you need 
to create a recycler view adapter. That’s because unlike a list view, 
recycler views don’t use any of the built-in adapters that come with 
Android. While writing your own adapter may seem like hard work, 
on the plus side it gives you more flexibility than using a built-in one. 

The adapter has two main jobs: to create each of the views that are 
visible within the recycler view, and to bind each view to a piece of 
data. In our case, the recycler view needs to display a set of cards, each 
containing a pizza image and caption. This means that the adapter 
needs to create each card and bind data to it. 

We’ll create the recycler view adapter over the next few pages. Here 
are the steps we’ll go through to create it: 


© 


Specify what data the adapter should work with. 

We want the adapter to work with the pizza data. Each pizza 
has a name and image resource ID, so we’ll pass the adapter 
an array of pizza names, and an array of image resource IDs. 


o 


Define the views the adapter should populate. 

We want to use the data to populate a set of pizza cards 
defined by card_captioned_image.xml We then need to create 
a set of these cards that will be displayed in the recycler view, 
one card per pizza. 


© 


Bind the data to the cards. 

Finally, we need to display the pizza data in the cards. To 
make that happen, we need to populate the inf o_text text 
view with the name of the pizza, and the inf o_image image 
view with the pizza’s image. 


We’ll start by adding a RecyclerView. Adapter class to our 
project. 


recycler views and card views 

Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 




there-, Eire no 

Dumb Questions 


0: Why doesn’t Android provide ready-made adapters for 
recycler views? 


Because recycler view adapters don’t just specify the data 
that will appear. They also specify the views that will be used for 
each item in the collection. That means that recycler view adapters 
are both more powerful, and less general, than list view adapters. 
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CaptionedlmagesAdapter code 


Add a recycler view adapter 

You create a recycler view adapter by extending the 
RecyclerView. Adapter class and overriding various 
methods; we’ll cover these over the next few pages. You also 
need to define a Vi ewHolder as an inner class, which tells 
the adapter which views to use for the data items. 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


We’re going to create a recycler view adapter called 
CaptionedlmagesAdapter. In Android Studio, 
highlight the com.hfad.bitsandpizzas 
package in the app/src/main/java folder, then go to 
File—>New...—Java class. When prompted, name the class 
“CaptionedlmagesAdapter” and make sure the package 
name is com. hf ad. bitsandpizzas. Then replace the 
code in CaptionedlmagesAdapter.java with the following: 


□ 

BitsAndPizzas 

4B 

app/src/main 

HB 


java 


Mn 


package com.hfad.bitsandpizzas; 

com.hfad.bitsandpizzas 

import android. support. v7 . widget. RecyclerView; "the 

RedydeA/iew dass, so Captioned I mages 

we need bo import it Adapter.java 

class CaptionedlmagesAdapter extends 

RecyclerView.AdapterCCaptionedlmagesAdapter.ViewHolder>{ ^ \/iewtto!dev* is used "to 

/ s P^'+y which views should 

be used 4\r eaeh data ite* 

public static class ViewHolder extends RecyclerView.ViewHolder { 

//Define the view to be used for each data item 

y° u define the ^iewHoldev- as 
an innev- dass. Well Complete 

* this latev in the dhaptev- 


As you can see, the ViewHolder inner class you define is 
a key part of the adapter. We’ve left the ViewHolder class 
empty for now, but we’ll come back to it later in the chapter. 

Before we look in more detail at view holders, we’ll tell 
the adapter what sort of data it should use by adding a 
constructor. 



Don’t worry if 
Android Studio 
gives you error 
messages when you 
add the above code 
to your project. 


It’s just warning you that the code isn’t 
complete yet. We still need to override 
various methods in our adapter code to 
tell it how to behave, and we’ll do this 
over the next few pages. 
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Tell the adapter 

what data it should work with... 


recycler views and card views 

Pizza data 
Card view 
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When you define a recycler view adapter, you need to tell it what sort of 
data it should use. You do this by defining a constructor that includes the 
data types you want the adapter to use as parameters. 

In our case, we want the adapter to take String captions and int image 
IDs. We’ll therefore add String [ ] and int [ ] parameters to the 
constructor, and save the arrays as private variables. Here’s the code that 
does this; you can either update your version of CaptionedlmagesAdapter.java 
now, or wait until we show you the full adapter code later in the chapter. 


o 

BitsAndPizzas 

Kfj 

app/src/main 

Hn 

java_ 

m 


class CaptionedlmagesAdapter extends 

RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 


com.hfad.bitsandpizzas 



private 

private 


String[] captions; 
int[] imagelds; 


Well use these variables 
•bo hold -the pizza data- 


Captionedlmages 

Adapter.java 


this.captions = captions; 


public CaptionedlmagesAdapter(String[] captions, int[] imagelds){ 

, ^ ^ 

this . imagelds = imagelds; IS”/** ^ *** to , the ( 

adapter using its donstvudtov*. 


} 


We also need to tell the adapter how many data items there are. You do 
this by overriding the RecyclerViewAdapter getltemCount () 
method. This returns an int value, the number of data items. We can 
derive this from the number of captions we pass the adapter. Here’s the 
code: 

class CaptionedlmagesAdapter extends 


...and implement the getltemCountO method 

□ 

BitsAndPizzas 

app/src/main 

MB 

java 

RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 4_i 

com.hfad.bitsandpizzas 

@Override 1 —nti 

public int getltemCount () { Captionedlmages 

return captions . length; <-'Th e | e „<jth ot the daptions array equals the Adapter.java 

} number ot data items in the redydler view- 

} 


Next we’ll define the adapter’s view holder. 
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define view holder 


Refine the adapter's view holder 

ViewHolder 


The view holder is used to define what view or views the 
recycler view should use for each data item it’s given. You 
can think of it as a holder for the views you want the recycler 
view to display. In addition to views, the view holder contains 
extra information that’s useful to the recycler view, such as its 
position in the layout. 

In our case, we want to display each item of pizza data on a 
card, which means we need to specify that the adapter’s view 
holder uses a card view. Here’s the code to do this (we’ll show 
you the full adapter code later in the chapter): 


import android.support.v7.widget.CardView; 


4r- 


class CaptionedlmagesAdapter extends 


CardView 


Were usin$ the 
CardView dlass, 
so we need *to 
impor-t it 


T 

Eaeh o-f our ViewHolders will 
eon-tain a CardView. We drea-ted 
-the layou-t -for -this CardView 
earlier in -the dhap-ter. 


RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 


public static class ViewHolder extends RecyclerView.ViewHolder { 


private CardView cardView; 


public ViewHolder(CardView v) { 


super(v); 
cardView = v; 


/ \ 



Cur redydler view needs -to display CardViews, 
so we spedi-fy -that our ViewHolder don-tains 
CardViews. l-f you wan-t to display ano-ther -type 
of data in -the redydler view, you de-f ine i*t here- 


□ 

BitsAndPizzas 

4U 

app/src/main 


When you create a view holder, you must call the ViewHolder 
super constructor using: 


java 

43 

com. hfad.bitsand pizzas 

L @ 

Captionedlmages 

Adapter.java 


super(v); 


This is because the ViewHolder superclass includes metadata 
such as the item’s position in the recycler view, and you need this 
information for the adapter to work properly. 

Now that we’ve defined our view holders, we need to tell the 
adapter how to construct one. We’ll do this by overriding the 
adapter’s onCreateViewHolder () method. 
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Override the onCreateViewHolderO method 

The onCreateViewHolder () method gets called when 
the recycler view requires a new view holder. The recycler 
view calls the method repeatedly when the recycler view is 
first constructed to build the set of view holders that will be 
displayed on the screen. 


recycler views and card views 

Pizza data 
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The method takes two parameters: a ViewGroup parent 
object (the recycler view itself) and an int parameter called 
viewType, which is used if you want to display different 
kinds of views for different items in the list. It returns a view 
holder object. Here’s what the method looks like: 


□ 


BitsAndPizzas 


@Override 

public CaptionedlmagesAdapter.ViewHolder onCreateViewHolder( 
ViewGroup parent, int viewType){ 

//Code to instantiate the ViewHolder 

} 


HUS 

app/src/main 

K3 


We need to add code to the method to instantiate the view 
holder. To do this, we need to call the ViewHolder’s 
constructor, which we defined on the previous page. The 
constructor takes one parameter, a CardView. We’ll create 
the CardView from the card_captioned_image.xml layout we 
created earlier in the chapter using this code: 


This method jets 
called when the 
rentier view needs to 
Create a view holder. 


java 


MT3 


com.hfad.bitsandpizzas 

L @ 

Captionedlmages 

Adapter.java 


CardView cv = (CardView) 


^ fci a Layoutlnf latev- object- 
Layoutlnflater.from(parent.getContext()) 


.inflate(R.layout.card_captioned_image, parent, false); 

Use the Layoutlntlator to turn the 

Here’s the full code for the onCreateViewHolder () layout into a Cardl/iew. This is nearly 

method (we’ll add this to the adapter later): identical to £ode you've already seen 

in the onCreatel/iewO of -fragments. 

@Override 


public CaptionedlmagesAdapter.ViewHolder onCreateViewHolder( 
ViewGroup parent, int viewType){ 

CardView cv = (CardView) Layoutlnflater.from(parent.getContext()) 
.inflate(R.layout.card_captioned_image, parent, false); 


return new ViewHolder(cv); 


t 

Specify u/bat layout to use fov- tbe 
Contents of tbe Viev/ttoldev- 


Now that the adapter can create view holders, we need to get 
it to populate the card views they contain with data. 
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add data 


Add the data to the card views 

You add data to the card views by implementing the adapter’s 
onBindViewHolder () method. This gets called whenever the 
recycler view needs to display data in a view holder. It takes two 
parameters: the view holder the data needs to be bound to, and 
the position in the data set of the data that needs to be bound. 

Our card view contains two views, an image view with an ID of 
inf o_image, and a text view with an ID of inf o_text. We’ll 
populate these with data from the captions and image Ids 
arrays. Here’s the code that will do that: 

Were using -these 
extra classes, so we 
need to impov-t them- 

import android.widget.TextView; 
import android.graphics.drawable.Drawable; 
import android.support.v4.content.ContextCompat; 


class CaptionedlmagesAdapter extends 

RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 


v 


Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 



private String[] captions;' 
private int[] imagelds; 


We added -these variables earlier. 
They dontain -the eap-tions and 
image resource IDs ot -the pizzas. 


Each CardView don-bins a TextView and 
ImageView. We need bo populate these 
with the daption and image o-f eadh piz_zj. 

□ 

BitsAndPizzas 

HU 

app/sre/main 

L Q 

java_ 

mn 

com. hfad. bitsand pizzas 

i_r 


The redydler view dal Is -this method when it wants to 
(or reuse) a view holder -for a new piede o-f data- 


Captionedlmages 

Adapter.java 


use 


} 


@Override 

public void onBindViewHolder(ViewHolder holder, int position)! 

CardView cardView = holder.cardView; 

ImageView imageView = (ImageView) cardView. f indViewByld (R. id. info_image) ; 
Drawable drawable = 

ContextCompat.getDrawable(cardView.getContext(), imagelds[position]); 
imageView. setlmageDrawable (drawable) ; Display the image 

imageView. setContentDescription (captions [position]) ; m (magel/iew- 

TextView textView = (TextView) cardView. findViewByld (R. id. info_text) ; 
textView.setText(captions[position]); 

> 't 

Display the daption in the TextView. 


That’s all the code we need for our adapter. We’ll show you the 
full code over the next couple of pages. 
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The full code for CaptionedlmagesAdapter.java 

Here’s our complete code for the adapter. Update your 
version of CaptionedlmagesAdapter.java so that it matches 
ours. 
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package com.hfad.bitsandpizzas; 

import android.support.v7.widget.RecyclerView;\ 
import android.support.v7.widget.CardView; / 
import android.view.ViewGroup; l 

import android.view.Layoutlnflater; 
import android.widget.ImageView; 

import android.widget.TextView; \ 

import android.graphics.drawable.Drawable; 
import android.support.v4.content.ContextCompat; 


□ 

Bits And Pizzas 


These are the classes 
weVe using, so we 
need to import the™. 


4113 

app/src/main 

HZ3 


java 


m 


com. hfad. bitsand pizzas 

L i 

Captionedlmages 

Adapter.java 


class CaptionedlmagesAdapter extends 

RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 


private 

private 


String[] captions; 
int[] imagelds; 


We've using -these variables -fov the 
eaftions and image vesouvte IPs. 


public static class ViewHolder extends RecyclerView.ViewHolder { 


private CardView cardView; 


public ViewHolder(CardView v) { 
super(v); 
cardView = v; 


Eaeh l/iewttoldeir will display a Cardl/iew. 


} 


public CaptionedlmagesAdapter(String[] 
this.captions = captions; 
this.imagelds = imagelds; 

} 


captions, int [ ] imagelds) { 

Pass data to the adapter 
in its donstrudtor. 


The Codt Continues ^^ 
on the next page. 
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code, continued 


The full CaptionedlmagesAdapter.java 
code (continued) 


V 

-*Q 


□ “ 


BitsAndPizzas 


QOverride 

public int getltemCount () { <=- The number o-p data items 

return captions.length; 


Hn 

app/sre/main 

MB 


Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


} 


java_ 


com.hfad.bitsandpizzas 

l_P 


QOverride 

public CaptionedlmagesAdapter.ViewHolder onCreateViewHolder( 
ViewGroup parent, int viewType){ 

CardView cv = (CardView) Layoutinflater.from(parent.getContext()) 


Captionedlmages 

Adapter.java 


.inflate(R.layout.card_captioned_image, parent, false); 


return new ViewHolder(cv); 


T 

Use -the layout we Seated 
eavliev -for -the Cavdl/iews. 


QOverride 

public void onBindViewHolder(ViewHolder holder, int position){ 

CardView cardView = holder.cardView; 

ImageView imageView = (ImageView)cardView.findViewByld(R.id.info_image); 
Drawable drawable = 

ContextCompat.getDrawable(cardView.getContext (), imagelds[position]); 
imageView.setlmageDrawable(drawable); 

imageView.setContentDescription(captions[position]); 

TextView textView = (TextView)cardView.findViewByld(R.id.info_text); 
textView. setText (captions [position] ) ; ^ ^dVWs | 

} and ”fe*t\/iew with data- 

} 

That’s all the code we need for our adapter. So what’s 
next? 
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Create the recycler view 

So far we’ve created a card view layout that displays captioned 
images, and an adapter that creates the cards and populates them 
with data. The next thing we need to do is create the recycler view, 
which will pass pizza data to the adapter so that it can populate the 
cards with the pizza images and captions. The recycler view will 
then display the cards. 

We’re going to add the recycler view to our existing 
PizzaFragment. Whenever the user clicks on the Pizzas tab in 
MainActivity, the pizzas will be displayed: 


recycler views and card views 

Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 




This is what the recycler 
view in PizzaFv-agment 

will look like. It will 
display the pizza cards 
in a two—Column grid- 


N 


14:31 ■ 

Bits and Pizzas 


V 

+ 

HOME PIZZAS 

PASTA 

STORES 



Add a layout for PizzaFragment 

Before we can add the recycler view, we need to add a new layout 
file to our project for PizzaFragment to use. This is because 
we intially created PizzaFragment as a ListFragment, and 
these define their own layout. 

To add the layout file, highlight the app/src/main/res/layout folder 
in Android Studio, and choose File—>New—^Layout resource file. 
When prompted, name the layout “fragment_pizza”. 
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layout code 


Add the RecyclerView to 
PizzaFragwent's layout 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


□ 

iPizz _ 

4H 

app/src/main 


You add a recycler view to a layout using the <RecyclerView> 
element from the RecyclerView Support Library. 

BitsAndPizzas 

Our PizzaFragment layout only needs to display a single 
recycler view, so here’s the full code for fragment_pizza-xml (update 
your version of the code to match ours): _ ... L :_j 

<android. support. v7 .widget .RecyclerViewTWis dc-fmcs t ey r 

xmlns:android= M http://schemas.android.com/apk/res/android" 

android: id="@+id/pizza_recycler" ^-* Wcvt jiven "the v-e£ydev- view dt\ ID so 

android: layout_width= M match_parent" ^° ^ our Java Code 

android: layout_height="match_j?arent" 

android: scrollbars= M vertical" /> This adds a vcv-bi£.al sdvollbav. 


;c> _ 

layout 


fragment_ 
pizza.xml 


You add scrollbars to the recycler view using the 
android: scrollbars attribute. We’ve set this to 
"vertical" because we want our recycler view to be able to 
scroll vertically. We’ve also given the recycler view an ID so that 
we can get a reference to it in our PizzaFragment code; we 
need this in order to control its behavior. 

Now that we’ve added a recycler view to PizzaFragment’s 
layout, we need to update our fragment code to get the recycler 
view to use the adapter we created. 


fret the recycler view to use the adapter 

To get the recycler view to use the adapter, there are two things 
we need to do: tell the adapter what data to use, then attach 
the adapter to the recycler view. We can tell the adapter what 
data to use by passing it the pizza names and image resource 
IDs via its constructor. We’ll then use the RecyclerView 
set Adapter () method to assign the adapter to the recycler 
view. 

The code to do this is all code that you’ve seen before, so we’ll 
show you the full PizzaFragment code on the next page. 
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The full PizzaFragmentJava code 

Here’s our full code for PizzaFragment.java (update your 
version of the code to match our changes): 

package com.hfad.bitsandpizzas; 


recycler views and card views 
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WcVe Piz^afValent to be 

import android.os.Bundle; d Fragment, not a ListFragment- 

import android, support .v4 . app .'Ld^Fragment; 
import android.view.Layoutlnflater; 

import android.view.View; . . 

, . , T7 . Were no longer using an 

import android.view.ViewGroup; . . , , , i m . ». 

AvvayAdaptev, so delete th.s Ime- 

import android, support.v7 .widget.RecyclerView; ^—- We need "to import "the 

Recydlev-\/iev/ elass. 

public class PizzaFragment extends Fragment { 


□ 

BitsAndPizzas 

413 

app/sre/main 


java 


MU 


com.hfad.bitsandpizzas 

^ Change -this -Prom ListFragment to Fragment R 

@ Over ride Pizza 

public View onCreateView (Layoutlnf later inf later, ViewGroup container, Fragment.java 

Bundle savedlnstanceState) { 

N^^vAd apte x^Stxija g> x. Pelete these lines, 

n. as -hheyVe no longer 

y^rdT oid. ft: La ^orT L. siiup t e ^4 ^f_^tem_l, • Y\ttts sary. 

"-ggrt nin super " . unCi e HLeVfew (ir r f later; —cunlatnei,— sa v cdliu Lancet! La Le) , 

RecyclerView pizzaRecycler = (RecyclerView)inflater.inflate( 

R.layout.fragment_pizza, container, false); 

- Use -the layou-t we updated 

String[] pizzaNames = new String [Pizza, pizzas . length] ; on the previous page- 
for (int i = 0; i < pizzaNames.length; i++) { 


pizzaNames [i] = Pizza .pizzas [i] .getName() Add the pizza names to an array 

Strings, and the pizza images 


to a« avvay ot mts. 

int[] pizzalmages = new int[Pizza.pizzas.length]; 
for (int i = 0; i < pizzalmages.length; i++) { 

pizzalmages[i] = Pizza.pizzas[i].getImageResourceId(); 

* - Pass the arrays to the adapter 




CaptionedlmagesAdapter adapter = new CaptionedlmagesAdapter (pizzaNames, pizzalmages) 
pizzaRecycler.setAdapter(adapter); 
return pizzaRecycler; 


There’s just one more thing we need to do: specify how the 
views in the recycler view should be arranged. 
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layout managers 


A recycler view uses a layout 
manager to arrange its views 

One of the ways in which a recycler view is more flexible than 
a list view is in how it arranges its views. A list view displays its 
views in a single vertical list, but a recycler view gives you more 
options. You can choose to display views in a linear list, a grid, or 
a staggered grid. 

You specify how to arrange the views using a layout manager. 
The layout manager positions views inside a recycler view: 
the type of layout manager you use determines how items are 
positioned. Here are some examples: 


v 


Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


We don i tovev Uw ta do it, tat Y 01 * a ' so 
wv-ite you*- oum layout makers. It you seavdb 
to*- “android v-edydlervie'w layou-Uanayv you 
•find many third-party ones you dan use in your 
dode, -from darousels to dirdles. 


N W J U 14:37 


<- harry potter *$/ 


Harry Potter and the Philosopher's.. • 

Bookl 
J.K. Rowling 

4.7 ★ £5.99 

Harry Potter and the Deathly Hallo.. • 

Book? 

J.K. Rowling 

4.8 ★ £5.99 


Harry Potter and the Chamber of S.. • 

Book 2 
J.K. Rowling 

4.6 ★ £5.99 


Harry Potter and the Prisoner of A.. • 

Book 3 
J.K. Rowling 

4.7 ★ £5.99 

Harry Potter and the Order of the.. • 

Book 5 
J.K. Rowling 

4.6 ★ £5.99 


Harry Potter and the Half-Blood Pr.. • 

Book 6 
J.K. Rowling 

4.8 ★ £5.99 


<1 o □ 




Top-Selling Books 



I Cujj&gQUGHTv 

apPle 

TREE 

YARD 


The Girl on the Tr... The Couple Next .„ Apple Tree Yard 
Paula Hawkins Shari Lapena Louise Doughty 



Ready Player One Night School Reasons to Stay... 

Ernest Cline Lee Child Matt Haig 


REASONS 
TO STAY 
ALIVE 

Matt Haig 


1 

▼ A H 14:35 | 

= Notes 

= 


This is 

Welcome 

example 

to Finland 

text 

Mow 

A little 

lawn 

message 

What makes up an app 
Activities 

Walk 

Layouts and views 
Fragments 

Services 

dog 

Permissions 

Calendar 125 

Broadcast intents and 

Tibet 163 

receivers 

Chart 218 

Content providers 

Picket 220 

Notifications 

Micro 228 

Svnc adapters and 

oon 

Take a note... 

H ? 4- 0 

<1 

□ 

o 

■ i 


linear layout manager Grid layout manager 

This arranges items in a This arranges items in a grid, 

vertical or horizontal list. 


On the next page, we’ll show you how to specify which layout 
manager to use in your recycler view. 


Staggered grid 
layout manager 

This arranges 
unevenly sized items 
in a staggered grid. 
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Specify the layout manager 

You tell the recycler view which layout manager it should use by 
creating a new instance of the type of layout manager you want to 
use, then attaching it to the recycler view. 


recycler views and card views 
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linear layout manager 


To tell the recycler view that you want it to display its views in a linear list, 
you’d use the following code: 


LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity()); 


pizzaRecycler.setLayoutManager(layoutManager); 

The LinearLayoutManager constructor takes one parameter, a 
Context. If you’re using the code in an activity, you’d normally use this to 
pass it the current activity (a context). The above code uses getActivity () 
instead, as our recycler view is in a fragment. 


A 

This needs to be a Content- 
l-P you use this dode in ^ 
an activity, you use u this 
instead o\ jetA^tivityO. 


(rrid layout manager 


You use similar code to specify a grid layout manager, except that you 
need to create a new GridLayoutManager object instead. The 
GridLayoutManager takes two parameters in its constructor: a Context, 
and an int value specifying the number of columns the grid should have. 


qvidLayou-fc/Wanaje*- shoulc 
he "two dolurnhS wide. 


GridLayoutManager layoutManager = new GridLayoutManager(getActivity(), 2); 


You can also change the orientation of the grid. To do this, you add two more 
parameters to the constructor: the orientation, and whether you want the 
views to appear in reverse order. 

£jives the £jridLayoutA1anajer 

. , T i a horizontal orientation. 

GridLayoutManager layoutManager = 

new GridLayoutManager(getActivity(), 1, GridLayoutManager.HORIZONTAL t false) 

t 

Staggered grid layout manager 


You tell the recycler view to use a staggered grid layout manager by creating 
a new StaggeredGridLayoutManager object. Its constructor takes two 
parameters: an int value for the number of columns or rows, and an int 
value for its orientation. As an example, here’s how you’d specify a staggered 
grid layout oriented vertically with two rows: 

StaggeredGridLayoutManager layoutManager = 


l-P you waited -to display 
the list in reverse order, 
you'd set this to true. 


This jives the 
stajjered jrid layout a 
vertical orientation- 


new StaggeredGridLayoutManager(2 , StaggeredGridLayoutManager.VERTICAL); 


Let’s add a layout manager to our recycler view. 
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PizzaFragment code 


The full PizzaFragment.java code 

We’re going to use a GridLayoutManager to display the 
pizza data in a grid. Here’s the full code for PizzaFragment.java , 
update your version of the code to match our changes (in bold): 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


package com.hfad.bitsandpizzas; 


a 

BitsAndPizzas 


import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 

import android.support.v7.widget.RecyclerView; 

import android.support.v7.widget.GridLayoutManager; 

public class PizzaFragment extends Fragment { 


Ha 

app/src/main 

4fi 


lVeVe us’mj 

this tlass, so 
we need to 
impovt it* 


java_ 

■ 

com.hfad.bitsandpizzas 



Pizza 

Fragment.java 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

RecyclerView pizzaRecycler = (RecyclerView)inflater.inflate( 

R.layout.fragment_pizza, container, false); 


String[] pizzaNames = new String[Pizza.pizzas.length]; 
for (int i = 0; i < pizzaNames.length; i++) { 

pizzaNames[i] = Pizza.pizzas[i].getName(); 

} 


int[] pizzalmages = new int[Pizza.pizzas.length]; 
for (int i = 0; i < pizzalmages.length; i++) { 

pizzalmages[i] = Pizza.pizzas [£] .getlmageResourceld(); 

} 


} 


CaptionedlmagesAdapter adapter = new CaptionedlmagesAdapter(pizzaNames, pizzalmages) 
pizzaRecycler.setAdapter(adapter); 

GridLayoutManager layoutManager = new GridLayoutManager(getActivity(), 2); 
pizzaRecycler.setLayoutManager(layoutManager); ^ 

return pizzaRecycler; \Nt*t go'mj to display the 


Next we’ll examine what happens when the code runs, then take 
our app for a test drive. 


Cav-dViews m a <yrid with 
two tolwmns, so weVe wsmg 
a ^vidLayowtManayv-. 
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What happens when the code runs 


Q The user clicks on the Pizzas tab in MainActivity. 

PizzaFragment is displayed, and its onCreateView () method runs. 


recycler views and card views 

Pizza data 
Card view 
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MainActivity PizzaFragment 


o 


The PizzaFragment onCreateView() method creates a new 
Captionedlmages Adapter. 

The method passes the names and images of the pizzas to the adapter using the 
adapter’s constructor, and sets the adapter to the recycler view. 



PizzaFragment CaptionedlmagesAdapter 


© 


The PizzaFragment onCreateView() method creates a 
SridLayoutManager and assigns it to the recycler view. 

The GridLayoutManager means that the views will be displayed in a grid. As the 
recycler view has a vertical scrollbar, the list will be displayed vertically. 
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what happens 


The story continues 


O 


The adapter creates a view holder for each of the 
CardViews the recycler view needs to display. 




ViewHolder CardView 


Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 



The adapter then binds the pizza names and images to the text view 
and image view in each card view. 



Let’s run the app and see how it looks. 
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iTf; '"O 

Test drive the app 


When we run the app, MainActivity is displayed. 
When we click on or swipe to the Pizzas tab, the pizzas 
are displayed in a grid. When we scroll the pizza data, 
MainActivity’s toolbar responds. 


recycler views and card views 

Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


-H3 


N 


V % U 14:31 

■ 

Bits and Pizzas 


+ 

A 


HOME PIZZAS 

1 

PASTA 

STORES 




Diavolo Funghi 


When you dlitk on the Pizzas 
-tab, PizzaFv-aynent is displayed 
It ton tains this <yrid ot tard 
views populated with pizza data- 



<1 

O 

□ 



N ^ U 14:40 


HOME PIZZAS PASTA STORES 



<1 O □ 


As you can see, adding a recycler view is more involved 
than adding a list view, but it gives you a lot more flexibility. 
Most of the work comes from having to write a bespoke 
recycler view adapter, but you can reuse it elsewhere in 
your app. As an example, suppose you wanted to display 
pasta cards in a recycler view. You would use the same 
adapter we created earlier, but pass it pasta data instead of 
pizzas. 

Before we move on, have a go at the following exercise. 
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magnets 



RecyclerView Magnets 


Use the magnets on this page and the next to create a new recycler 
view for the pasta dishes. The recycler view should contain a grid of card 
views, each one displaying the name and image of a pasta dish. 


'This is the todt -fov the Pasta dass. 


package com.hfad.bitsandpizzas; 


public class Pasta { 

private String name; 
private int imageResourceid; 


□ 

BitsAndPizzas 

HB 

app/src/main 

MB 


public static final.[] pastas = { 

new Pasta("Spaghetti Bolognese", R.drawable.spag_bol), 
new Pasta("Lasagne", R.drawable.lasagne) 

}; 


java 

m3 

com.hfad.bitsandpizzas 



Pasta .java 


private Pasta(String name, int imageResourceid) { 
this.name = name; 

this.imageResourceid =S imageResourceid; 

} 


getName() 


Pasta 


public String.{ 

return name; 

} 


public int 
return 


{ 


imageResourceid; 


} 


andro id:scrollbars | RecyclerView | 

| android.support.v7.widget.RecyclerVievT~| 

1 0 

_] | getlmageResourceld() | 


"vertical' 


This is -the £ode -Po\r the layout 




xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/pasta_recycler" 


android:layout_width="match_parent" 
android:layout_height="match_parent"/> 


□ 

BitsAndPizzas 

m3 

app/src/main 

MB 



fragment_ 
pasta.xml 
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recycler views and card views 




This is the todc V PastaFv-a^ent java. 


□ 


BitsAndPizzas 


public class PastaFragment extends Fragment { 


4U 

app/src/main 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

RecyclerView pastaRecycler = (RecyclerView)inflater.inflate( 

, container, false); 


La 


java_ 

oi 

com.hfad.bitsandpizzas 

L @ 

Pasta 

Fragment.java 


String[] pastaNames = new String[Pasta.pastas.length]; 
for (int i = 0; i < pastaNames.length; i++) { 

pastaNames[i] = Pasta.pastas[i].getName(); 

} 


int[] pastalmages = new int[Pasta.pastas.length]; 
for (int i = 0; i < pastalmages.length; i++) { 

pastalmages[i] = Pasta.pastas[i].getlmageResourceld(); 

} 


adapter = 


new (pastaNames, ); 

pastaRecycler.setAdapter(adapter); 

layoutManager = new (getActivity(), 2); 

pastaRecycler.setLayoutManager(layoutManager); 
return pastaRecycler; 


ArrayAdaptei 


] 


PCaptionedlmagesAdapter | 


| CaptionedlmagesAdapter j 


[ G r j-dLayoutManager | 
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magnets solution 





RecyclerView Magnets Solution 

Use the magnets on this page and the next to create a new recycler 
view for the pasta dishes. The recycler view should contain a grid of card 
views, each one displaying the name and image of a pasta dish. 


package com.hfad.bitsandpizzas; 


□ 

BitsAndPizzas 


public class Pasta { 

private String name; 
private int imageResourceid; 


public static final 

new Pasta("Spaghetti 
new Pasta("Lasagne", 

}; 



It’s a* away <1 Pasta objedts- 

[] pastas = { 

Bolognese", R.drawable.spag_bol), 
R.drawable.lasagne) 


La 

app/src/main 

ma 

java 

La 

com.hfad.bitsandpizzas 



Pasta .java 


private Pasta(String name, int imageResourceid) { 
this.name = name; 

this.imageResourceid =S imageResourceid; 


public String _ 


getName () 


return name; 


| ge tlmageRe source Id ()^ ^ 


These methods dire used by 

P^ s ^F\rajy*eirfcjava. 


public int 

return imageResourceid; 


RecyclerView 


] 


This is a spav-e magnet- 




Add the redydler view to the layout- 


android.support.v7.widget■RecyclerView~| 

xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/pasta_recycler" 


□ 


BitsAndPizzas 


4 H 

app/src/main 



"vertical" "k - Add vertidal sdv-ollbaw 


L CZI 


android:layout_width="match_parent" 
android:layout_height="match_parent"/> 


CO _ 

MU 

layout 


fragment_ 
pasta.xml 
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recycler views and card views 


public class PastaFragment extends Fragment { 


□ 

Pizz 

MtJ 


BitsAndPizzas 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

RecyclerView pastaRecycler = (RecyclerView)inflater.inflate( 


Use this layout- •— 


R.layout.fragment_ pasta J , container, false); 


String[] pastaNames = new String[Pasta.pastas.length]; 
for (int i = 0; i < pastaNames.length; i++) { 

pastaNames[i] = Pasta.pastas[i].getName(); 

} 


app/src/main 

La 

java 

oi 

com.hfad.bitsandpizzas 

L @ 

Pasta 

Fragment.java 


int[] pastalmages = new int[Pasta.pastas.length]; 
for (int i = 0; i < pastalmages.length; i++) { 

pastalmages[i] = Pasta.pastas[i].getlmageResourceld(); 

} 1/VcVc using the 

_____ ^^ Captioned|mages/\dapte' 

I captionedlmagesAdapter j a dapter = ^ y,V "°^ c earlier. 

_ 


CaptionedlmagesAdapter | 

pastaRecycler.setAdapter(adapter); 


Pass the pasta names and 
images to the adapter. 


(pastaNames, 



GridLayoutManage ^ layoutManager 

pastaRecycler.setLayoutManager(layoutManager); 
return pastaRecycler; ^ 

X '"~- Use the ^v-idLayou-tMana^e'r to 
display -the dav-d views m a yid- 


J GridLayoutManager | 

f 


(getActivity() , 2 ) 



You didn't need to use 
these magnets. 


GridLayout 

l 

ArrayAdapter | 

| r Ar rayAdap te 
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clicks 


Make the recycler view respond to clicks 

So far, we’ve added a recycler view to PizzaFragment, and 
created an adapter to populate it with pizza data. 

The next thing we need to do is get the recycler 
view to respond to clicks. We’ll create a new activity, 
PizzaDetailActivity, which will start when the user 
clicks on one of the pizzas. The name and image of the pizza 
the user selects will be displayed in the activity: 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 



Diavolo 


Mick the user clicks 

Oh OhC of the pizzas 

the recycler view, 
well display details 
of that pizza ih 
PizzaDetailActivity. 


Before we can get the recycler view to respond to 
clicks, we need to create PizzaDetailActivity. 
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Create PizzaPetailActivity 

To create PizzaDetailActivity, click on the com. hf ad. 
bitsandpiz zas package in the Bits and Pizzas folder structure, 
then go to File—>New.Activity—>Empty Activity. Name the activity 
“PizzaDetailActivity”, name the layout “activity_pizza_detail”, make sure 
the package name is com. hf ad. bitsandpiz zas, and check the 
Backwards Compatibility (AppCompat) option. 

Now let’s update PizzaDetailActivity’s layout. Open activity_ 
pizza*—detail, xml , and update it with the code below, which adds a text view 
and image view to the layout that we’ll use to display details of the pizza: 


recycler views and card views 

Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


|£ prompted -for 
-the activity's source 
lanjuay, select the 
option -for Java. 



<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_jparent" 
android:orientation="vertical" 

tools:context="com.hfad.bitsandpizzas.PizzaDetailActivity"> 


□ 


BitsAndPizzas 


4n 

app/sre/main 

HB 


<include 

layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 


We'll add a toolbar 

to the activity- 



activity_pizza_ 

detail.xml 


<TextView 

android:id="@+id/pizza_text" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android:textAppearance="?android:attr/textAppearanceLarge" /> 


We'll put the na*«e ot the 

<ImageView pizzJ in the Textl/iew. 

android:id="@+id/pizza_image" 
android:layout_height="wrap_content" 
android:layout_width="match_j?arent" 
android:adj ustViewBounds="true"/>—-- 

</LinearLayout> tVe'll put the pizza 

ima^e in the |ma$e\/ie>w. 




We’ll look at what we need the code for PizzaDetailActivity.java to 
do on the next page. 
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parental responsibilities 


What PizzaPetailActivity needs to do 


There are a couple of things that we need 
PizzaDetailActivity to do: 


o 

o 


PizzaDetailActivity’s main purpose is to display the name 
and image of the pizza the user has selected. To do this, we’ll get 
the selected pizza’s ID from the intent that starts the activity. We’ll 
pass this to PizzaDetailActivity from PizzaFragment 
when the user clicks on one of the pizzas in the recycler view. 

We’ll enable the PizzaDetailActivity’s Up button so that 
when the user clicks on it, they’ll get returned to MainActivity. 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


Update AndroidManifest.xwl to give 
PizzaDetailActivity a parent 

We’ll start by updating AndroidManifest.xml to specify that 
MainActivity is the parent of PizzaDetailActivity. 

This means that when the user clicks on the Up button in 
PizzaDetailActivity’s app bar, MainActivity will be 
displayed. Here’s our version of AndroidManifest.xml (update your 
version to match our changes in bold): 

<manifest ...> 

Application 

. . . > 

Activity 

android:name=".MainActivity"> 

</activity> 

Activity 

android:name=".OrderActivity" 

</activity> 

Activity 

android:name=".PizzaDetailActivity" 

android: parentActivityName=" . MainActivity" > 

</activity> 

</application> 

</manifest> 


4 " 

This seis MamAaivity as 
PiziaDe-bilAt-tivi-ty's faveni- 


□ 

BitsAndPizzas 



AndroidManifest.xml 


Next, we’ll update PizzaDetailActivity.java. You’ve already seen how to 
do everything we need, so we’re just going to show you the full code. 
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The code for PizzaPetailActivity.java 

Here’s the full code for PizzaDetailActwity.java\ update your version of 
the code to match ours: 
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□ 


package com.hfad.bitsandpizzas; 


import android.support.v7.app.ActionBar; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.support.v7.widget.Toolbar; 
import android.widget.ImageView; 
import android.widget.TextView; 

import android.support.v4.content.ContextCompat; 


□ 


Bits And Pizzas 




app/src/main 

, . A KU 

VVe re usinj these java 

classes, so we need mi 

-to import them. com.hfad.bi tsandp izzas 


PizzaDetailActivity.java 


public class PizzaDetailActivity extends AppCompatActivity { 


We || use -this £ohS-fcah-fc to 

public static final String EXTRA PIZZA ID = "pizzald"; i L ijv o . 

- - t he IP o\ the pizza as extra 

in-formation i* the intent- 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_piz za_detail); 


//Set the toolbar as the activity's app bar 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 

setSupportActionBar(toolbar); 

ActionBar actionBar = getSupportActionBar(); 

actionBar . setDisplayHomeAsUpEnabled (true) ; ^— Enable the Up button- 


Use the 
pizza IV to 
populate the 


//Display details of the pizza 

^Tnt pizzald = (Integer)getlntent().getExtras().get(EXTRA_PIZZA_ID); 

String pizzaName = Pizza.pizzas[pizzald].getName(); 

TextView textView = (TextView)findViewByld(R.id.pizza_text); From the intent 

"fextl/iew ands textView. setText (pizzaName) ; P ,2 ^3 the 

I .. ] user dhose- 

Imagel/iew. [int pizzalmage = Pizza.pizzas[pizzald].getlmageResourceld(); 

/ ImageView imageView = (ImageView)findViewByld(R.id.pizza_image); 

[ imageView.setlmageDrawable(ContextCompat.getDrawable(this, pizzalmage)); 

VimageView.setContentDescription(pizzaName); 

} 


you are here ► 


569 






RecyclerView hierarchy 


fret a recycler view to respond to clicks 

Next, we need to get items in the recycler view to respond to clicks so 
that we can start PizzaDetailActivity when the user clicks on a 
particular pizza. 

When you create a navigation list with a list view, you can respond to click 
events within the list by giving the list view an OnltemClickListener. 
The list view then listens to each of the views that it contains, and if any of 
them are clicked, the list view calls its OnltemClickListener. That 
means that you can respond to list item clicks with very little code. 

List views are able to do this because they inherit a bunch of functionality 
from a deep hierarchy of superclasses. Recycler views, however, don’t 
have such a rich set of built-in methods, as they don’t inherit from the 
same superclasses. Here’s a class hierarchy diagram for the ListView 
and RecyclerView classes: 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 



While this gives recycler views more flexibility, it also means that with a 
recycler view you have to do a lot more of the work yourself. So how do 
we get our recycler view to respond to clicks? 
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You can listen for view events from the adapter 


To get your recycler view to respond to click events, you need access 
to the views that appear inside it. These views are all created inside the 
recycler view’s adapter. When a view appears onscreen, the recycler view 
calls the CaptionedlmagesAdapter’s onBindViewHolder () 
method to make the card view match the details of the list item. 

When the user clicks on one of the pizza cards in the recycler view, we 
want to start Piz zaDe tail Activity, passing it the position of the 
pizza that was clicked. That means you could put some code inside the 
adapter to start an activity like this: 


recycler views and card views 

Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


□ 


□ 

BitsAndPizzas 

HD 

app/src/main 

4B 


java 


40 


com, hfad.bitsand pizzas 


Captionedlmages 

Adapter.java 


class CaptionedlmagesAdapter extends 

RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 


©Override 

public void onBindViewHolder(ViewHolder holder, final int position)! 
final CardView cardView = holder.cardView; 

ImageView imageView = (ImageView)cardView.findViewByld(R.id.info_image); 

Drawable drawable = 

ContextCompat.getDrawable(cardView.getContext(), imagelds[position]); 
imageView.setlmageDrawable(drawable); 
imageView.setContentDescription(captions[position]); 

TextView textView = (TextView)cardView.findViewByld(R.id.info_text); 
textView.setText(captions[position]); 

cardView.setOnClickListener(new View.OnClickListener(){ 

IW-t upda-te \ ©Override 

public void onClick(View v) { 

Intent intent = new Intent(cardView.getContext(), PizzaDetailActivity.class) 
intent.putExtra(PizzaDetailActivity.EXTRA_PIZZA_ID, position); 
cardView.getContext().startActivity(intent); 

Adding "this code -to "the adapter 


the adapter \ 
Code just yet- < 
This is just ) 
an example- / 


} 


\i ) ; 


} 


} 


would start PizzaDetailActivity 
when a Cardl/iew is clicked- 


But just because you could write this code, it doesn’t necessarily 
mean that you should. 





You could respond to a click event by adding code to your adapter 
class. But can you think of a reason why you wouldn’t want to do that? 
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reusable adapters 


Keep your adapters reusable 

If you deal with click events in the Cap tionedlmages Adapter 
class, you’ll limit how that adapter can be used. Think about the app we’re 
building. We want to display lists of pizzas, pasta, and stores. In each 
case, we’ll probably want to display a list of captioned images. If we 
modify the Cap tionedlmages Adapter class so that clicks always 
send the user to an activity that displays details of a single pizza, we 
won’t be able to use the CaptionedlmagesAdapter for the pasta 
and stores lists. We’ll have to create a separate adapter for each one. 

decouple your adapter with an interface 

Instead of that approach, we’ll keep the code that starts the activity 
outside of the adapter. When someone clicks on an item in the list, 
we want the adapter to call the fragment that contains the list, and 
then the fragment code can fire off an intent to the next activity. That 
way we can reuse CaptionedlmagesAdapter for the pizzas, 
pasta, and stores lists, and in each case leave it to the fragments to 
decide what happens in response to a click. 

We’re going to use a similar pattern to the one that allowed us to 
decouple a fragment from an activity in Chapter 9. We’ll create a 
Listener interface inside CaptionedlmagesAdapter like this: 

interface Listener { 

void onClick(int position); 

} 



Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


We’ll call the listener’s onClick () method whenever one of the 
card views in the recycler view is clicked. We’ll then add code to 
PizzaFragment so that it implements the interface; this will allow 
the fragment to respond to clicks and start an activity. 


This is what will 

o 

e 

o 


happen at runtime: 

A user will click on a card view in the recycler view. 

The Listener’s onClick () method will be called. 

The onClick () method will be implemented in PizzaFragment. Code 
in this fragment will start PizzaDetailActivity. 


Let’s start by adding code to CaptionedlmagesAdapter.java. 
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Add the interface to the adapter 

We’ve updated our Captionedlmages.Adapterjava code to add the Listener 
interface and call its onClick () method whenever one of the card views is 
clicked. Apply the changes below (in bold) to your code, then save your work: 


recycler views and card views 
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□ 


package com.hfad.bitsandpizzas; 

import android.support.v7.widget.RecyclerView; 

import android.support.v7.widget.CardView; 

import android.view.ViewGroup; 

import android.view.Layoutlnflater; 

import android.widget.ImageView; 

import android.widget.TextView; 

import android.graphics.drawable.Drawable; 

import android.support.v4.content.ContextCompat; 

import android, view. View; ^ -> i .. / i 

vVe re using this extra dlass, so 


□ 


BitsAndPizzas 


4T3 

app/src/main 

MB 


java 


mu 


com.hfad.bi tsand pizzas 


, , . . Captionedlmages 

we » eeA » 't- Adapter.java 


class CaptionedlmagesAdapter extends 

RecyclerView.Adapter<CaptionedImagesAdapter.ViewHolder>{ 


private String[] captions; 
private int[] imagelds; 

private Listener listener; 


Add -the Listener as a private variable. 


interface Listener { — 

void onClick(int position); 

} 


Add the inter-fade. 


public static class ViewHolder extends RecyclerView.ViewHolder { 

private CardView cardView; 

public ViewHolder(CardView v) { 
super(v); 
cardView = v; 

} 

} 


public CaptionedlmagesAdapter(String[] captions, int[] imagelds){ 
this.captions = captions; 

this . imagelds = imagelds; C Lodt dontinues ^ ^ 

on the next page. 
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code, continued 


The CaptionedlmagesAdapter.java code (continued) 


QOverride 

public int getltemCount(){ 
return captions.length; 

} A^fcivi'tyies and will use "this 

method to register as a listener, 
public void setListener(Listener listener){ 
this.listener = listener; 

} 


v 


Pizza data 
Card view 
Adapter 
Recycler view 
Clicks 


□ 

BitsAndPizzas 

KU 

app/sre/main 

HI■ 


java 


QOverride 

public CaptionedlmagesAdapter.ViewHolder onCreateViewHolder( 

ViewGroup parent, int viewType){ 

CardView cv = (CardView) Layoutlnflater.from(parent.getContext()) 

.inflate(R.layout.card_captioned_image, parent, false); 
return new ViewHolder(cv); 

} You need to change the position variable 


ms 

com.hfad.bitsandpizzas 

Captionedlmages 
Adapter.java 


\C 


to -final, as it's used in an inner class. 


@Override 

public void onBindViewHolder(ViewHolder holder, final int position){ 

CardView cardView = holder.cardView; 

ImageView imageView = (ImageView)cardView.findViewByld(R.id.info_image) ; 
Drawable drawable = 

ContextCompat.getDrawable(cardView.getContext(), imagelds[position]); 
imageView.setlmageDrawable(drawable); 
imageView.setContentDescription(captions[position]); 

TextView textView = (TextView)cardView.findViewByld(R.id.info_text) ; 
textView.setText(captions[position]); 


r 

Add the 
listener 
to the 
CardView. 


cardView.setOnClickListener(new View.OnClickListener() { 


@Override 

public void onClick (View v) { When the Cardl/iew is clicked, call 
if (listener != null) { the Listener onClidkO method- 

listener.onClick(position); 

} 

} 


}) 


} 


Now that we’ve added a listener to the adapter, we need to 
implement it in PizzaFragment. 
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Implement the listener in PizzaFragment.java 

We’ll implement CaptionedlmagesAdapter’s Listener 
interface in PizzaFragment so that when a card view in the 
recycler view is clicked, PizzaDetailActivity will be started. 

Here’s the updated code; update your version of the code to match 
ours (our changes are in bold): 


recycler views and card views 
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□ 


package com.hfad.bitsandpizzas; 


□ 

BitsAndPizzas 


import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 

import android.support.v7.widget.RecyclerView; 
import android.support.v7.widget.GridLayoutManager; 

import android, content. Intent;^-. WeVe usmj a* Intent to stavt 

the adiiviiy, so impovt this dlass. 


HU 

app/src/main 

java_ 

MB 

com.hfad.bitsandpizzas 


Pizza 

Fragment.java 


public class PizzaFragment extends Fragment { 


QOverride 

public View onCreateView(Layoutlnflater inflater, ViewGroup container, 

Bundle savedlnstanceState) { 

RecyclerView pizzaRecycler = (RecyclerView)inflater.inflate( 

R.layout.fragment_pizza, container, false); 

String[] pizzaNames = new String[Pizza.pizzas.length]; 
for (int i = 0; i < pizzaNames.length; i++) { 

pizzaNames[i] = Pizza.pizzas[i].getName(); 

} 


int[] pizzalmages = new int[Pizza.pizzas.length]; 
for (int i = 0; i < pizzalmages.length; i++) { 

pizzalmages[i] = Pizza.pizzas[i].getlmageResourceld(); 


The to At dohtihues ^^ 
oh the next page. 
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code, continued 


\/j Pizza data 


The PizzaFragment.java code (continued) 



Card view 
Adapter 
Recycler view 


->> Clicks 


CaptionedlmagesAdapter adapter = 


new CaptionedlmagesAdapter(pizzaNames, pizzalmages); 


pizzaRecycler.setAdapter(adapter); 

GridLayoutManager layoutManager = new GridLayoutManager(getActivity (), 2); 
pizzaRecycler.setLayoutManager(layoutManager); 

adapter.setListener(new CaptionedlmagesAdapter.Listener() { 

public void onClick(int position) { 

Intent intent = new Intent(getActivity(), PizzaDetailActivity.class); 
intent.putExtra(PizzaDetailActivity.EXTRA_PIZZA_ID , position); 
getActivity().startActivity(intent); 


} 

}); 

return pizzaRecycler; 


This implements the Listener 
onClitkO method- It starts 
PizzaPetailActivity, passing it the 
IP Jc the pizza the user those- 



That’s all the code we need to make views in the recycler view 
respond to clicks. By taking this approach, we can use the same 
adapter and card view for different types of data that is composed 
of an image view and text view. 



card_captioned_ 

image.xml 



Let’s see what happens when we run the code. 
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Test drive the app 

When we run the app and click on the Pizzas tab, 
PizzaFragment is displayed. When we click on one of 
the pizzas, PizzaDetailActivity starts, and details 
of that pizza are displayed. 


recycler views and card views 

^ Pizza data 
y/ Card view 
y/ Adapter 

Recycler view 
-►Ivl Clicks 


Bits and Pizzas 


HOME PIZZAS 


VVV>cr\ you 
t\\cM on tbe 
Pizzas -tab, 
Piz^aFv-agment ■—^ 
is displayed. 


Diavolo 



Men you eliek on 
a pizza, its de-tails 
av-e displayed in 

PizzaDetailActivity. 



The card view responds to clicks, and displays 
PizzaDetailActivity. 


PizzaPe'tailA^'ti' / i'ty 

displays tbe fizza s 
na^e and image- 
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toolbox 



Your Android Toolbox 

You’ve got Chapter 13 under 
your belt and now you’ve 
added recycler views and card 
views to your toolbox. 


You ta* download 
i he -full tode -for 
-the chaste* - -fvom 

^ii\>s://-tm7urUom/ 

Headf'ivstA'ndvoid- 




BULLET POINTS 


■ Card views and recycler views have their 
own Support Libraries. 


■ Add a card view to a layout using 

the <android.support. 

v7 . widget. CardView> element. 


■ Give the card view rounded corners using 

the cardCornerRadius attribute. 

This requires a namespace of "http: // 

schemas.android.com/apk/ 
res-auto". 


■ Give the card view a drop shadow using 
the cardElevation attribute. This 
requires a namespace of "http: // 

schemas.android.com/apk/ 
res-auto". 


■ Recycler views work with adapters that 
are subclasses of RecyclerView. 
Adapter. 


When you create your own 

RecyclerView. Adapter, you must 
define the view holder and implement 

the onCreateViewHolder() , 
onBindViewHolder (), and 
getltemCount () methods. 

You add a recycler view to a layout 
using the <android. support. 
v7.widget.RecyclerView> 
element. You give it a scrollbar using the 

android: scrollbars attribute. 

Use a layout manager to specify how 
items in a recycler view should be 
arranged. A LinearLayoutManager 
arranges items in a linear list, 
a GridLayoutManager 
arranges items in a grid, and a 
StaggeredGridLayoutManager 
arranges items in a staggered grid. 
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14 navigation drawers 



Going Places + 



You’ve already seen how tabs help users navigate your apps. 

But if you need a large number of them, or want to split them into sections, the 
navigation drawer is your new BFF. In this chapter, we’ll show you how to create a 
navigation drawer that slides out from the side of your activity at a single touch. You’ll 
learn how to give it a header using a navigation view, and provide it with a structured 
set of menu items to take the user to all the major hubs of your app. Finally, you’ll 
discover how to set up a navigation view listener so that the drawer responds to the 
slightest touch and swipe. 


this is a new chapter 
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need more options 


Tab layouts allow easy navigation... 


In Chapter 12, we introduced you to the tab layout as a way of making 
it easy for users to navigate around your app. In that chapter we added 
a Home screen tab to the Bits and Pizzas app, along with tabs for the 
Pizzas, Pasta, and Stores categories: 


These are the tabs we — 
Seated in Chapter IZ. 


N T ^ I 14:52 ^ 

Bits and Pizzas + 

HOME PIZZAS PASTA STORES 



Tab layouts work well if you have a small number of category screens 
that are all at the same level in the app hierarchy. But what if you want 
to use a large number of tabs, or group the tabs into sections? 


but navigation drawers let you show more options 


If you want users to be able to navigate through a large number of options, or group 
them into sections, you might prefer to use a navigation drawer. This is a slide-out 
panel that contains links to other parts of the app that you can group into different 
sections. As an example, the Gmail app uses a navigation drawer that contains sections 
such as email categories, recent labels, and all labels: 


580 


The main email 
categories are at the 
top o( the drawer. 


Labels that have 
recently been clicked 
on are displayed in a 
separate section. 


Finally, here s a long list 
all the email labels. 
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Social 

^ Promotions 

Recent labels 

Old emails 

Work 

All labels 


10:03 W 

Q. 1 


This is -the <$mail app- It 

dontains a navigation 
drawer that slides over 
the app’ s *»3in dontent- 
The drawer gives you lots 
ot options you d3n use 
to navigate to di-Cterent 
parts of the app 



When you dlidk on an iten> in the 
navigation drawer, the drawer 
dloses and the dontent -for that 
option is displayed here- 









navigation drawers 


We're going to create a navigation 
drawer for a new email app 


We’re going to create a navigation drawer for a new email app called 
CatChat. The navigation drawer will contain a header (including an 
image and some text) and a set of options. The main options will be 
for the user’s inbox, draft messages, sent items, and trash. We’ll also 
include a separate support section for help and feedback options: 


This is -the CatChat app- 


This is -the navigation 
drawers header. 


These are -the drawer s 
mam options. 


The Help and 
Feedback options 
are in a separate 
support section. 



— The apps main dontent 
is displayed here. 


The navigation drawer is composed of several different components. 
We’ll go through these on the next page. 
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drawer anatomy 


Navigation drawers deconstructed 


You implement a navigation drawer by adding a drawer layout to 
your activity’s layout. This defines a drawer you can open and close, 
and it needs to contain two views: 


© 

o 


A view for the main content. 

This is usually a layout containing a toolbar and a frame layout, which you use 
to display fragments. 

A view for the drawer contents. 

This is usually a navigation view, which controls most of the drawer’s behavior. 


When the drawer’s closed, the drawer layout looks just like a normal 
activity. It displays the layout for its main content: 


ftare the drawers —■ 

dosed, so it looks like 
a pla’m old activity. 


N 


V ji m 12:03 1 

= 

CatChat 




The mam Content o-f the activity 
usually is Composed o£ a Wlbar 
a*d a -frame layout that's used 
to display -fragments- 


When you open the navigation drawer, it slides over the activity’s 
main content to display the drawer’s contents. This is usually a 
navigation view, which displays a drawer header image and a list of 
options. When you click on one of these options, it either starts a new 
activity or displays a fragment in the activity’s frame layout: 
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The drawer s 
^ohtehts are 
de-Pmed by a 
navigation view. 
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navigation drawers 


Here's what we're going to do 


We’re going to create a navigation drawer for the CatChat app. 

There are four main steps we’ll go through to do this: 

Q Create basic fragments and activities for the app’s contents. 

When the user clicks on one of the options in the navigation drawer, we want 
to display the fragment or activity for that option. We’ll create the fragments 
InboxFragment, DraftsFragment, SentltemsFragment, and 
TrashFragment, and activities HelpActivity and FeedbackActivity. 


These 

are the —^ 
-(Vagmehts. 


Create the drawers header. 

We’ll build a layout, novjieoder.xml , for the drawer’s header. It will 
contain an image and text. 


These are 



N 


CatChat 

N # i 1 16:52 1 

CatChat 

Help 


-— 

__ 1 


Create the drawers options. 

We’ll build a menu, menu_nav.xml , for the options the 
drawer will display. 

Create the navigation drawer. 

We’ll add the navigation drawer to the app’s main activity, 
and get it to display the header and options. We’ll then 
write activity code to control the drawer’s behavior. 


Well Create this 
navigation drawer 



SS 

Mesagez 1 

✓ 

Draftz 

► 

Sent mesagez 

• 

In da trash 

Support 1 

? 

Halp 


Giv us feedback 


T 

The drawer s 
header and 
I options 


Let’s get started. 
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add libraries 


Create the CatChat project 

Before we begin, we need a new project for the CatChat app. 

Create a new Android project with an empty activity for an 
application named “CatChat” with a company domain of “hfad. 
com”, making the package name com. hfad. catchat. The 
minimum SDK should be API level 19 so that it works with most 
devices. Specify an activity called “MainActivity” and a layout 
called “activity_main”, and make sure that you check the 
Backwards Compatibility (App Comp at) option. 

Add the v7 AppCompat and design Support Libraries 

We’re going to use components and themes from the v7 
AppCompat and Design Support Libraries in this chapter, so 
we need to add them to our project as dependencies. To do this, 
choose File—^Project Structure in Android Studio, click on the 
app module, then choose Dependencies. When you’re presented 
with the project dependencies screen, click on the “+” button at 
the bottom or right side of the screen. When prompted, choose 
the Library Dependency option, then select the Design Library 
from the list of possible libraries. Repeat these steps for the v7 
AppCompat Support Library if Android Studio hasn’t already 
added it for you. Finally, use the OK buttons to save your changes. 



Fragments/activities 

Header 

Options 

Drawer 
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Project Structure 


+ - 

SDK Location 
Project 

Developer Se.™ 
Ads 

Authentica... 

Notifications 

Modules — 


■ Properties Signing Flavors Build Types 


Dependencies 


Scope 

finclude=|* jar], dir= libs} Compile 

androidTestCompilet'com.antJroid.support.test.espresscuespressQ-coreiZ.Z.Z 
IflJ j unit :j unit :4.LZ Test compile 

fl) com. android. supportappcompat-v7:25.3.0 Compile 

m com. android. support:design:25.3.0 Compile 




We've added the v7 AppCompat and Design 
Support Libraries to our project as dependendies. 


Next, we’ll create four basic fragments for the app’s inbox, 
drafts, sent messages, and trash. We’ll use these fragments later 
in the chapter when we write the code for the navigation drawer. 
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Create InboxFragment 

We’ll display InboxFragment when the user clicks on the 
inbox option in the navigation drawer. Highlight the com. hf ad. 
cat chat package in the app/src/main /java folder, then go to 
File—>New...—^Fragment—^Fragment (Blank). Name the fragment 
“InboxFragment” and name its layout “fragment_inbox”. Then 
update the code for InboxFragment.java to match our code below: 



navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


This is what 
|hboxF\ra0r*eirfc —^ 

looks like. 


nbox 


package com.hfad.catchat; 

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android, view.Layoutlnflater; ^|| -fv-aj t ts 

import android.view.View; use the Fragment 

import android.view.ViewGroup; 


□ 

CatChat 

4d 

app/sre/main 

4d 




dass -from the 
Support Library. 


public class InboxFragment extends Fragment { 


@Override 


java 


Md 


com. hfad .catchat 

LC 


InboxFragment.java 


public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_inbox, container, false); 

} 


And here’s the code for fragment_inbox.xml (update your version of this 
code too): 


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.catchat.InboxFragment"> 


□ 

CatChat 


L Q 

app/sre/main 

Hd 


res 


4d 

layout 


<TextView 

android:layout_width="match_parent" 
android:layout_height="match_j?arent" 
android: text="Inbox" /> 

.... t .. rnboxpiraijmeirt s layout just eon-tains 

</LmearLayout> a ^ tW ^ „ 

wc da* easily -tell when its displayed- you are here 


fragmentjnbox.xml 
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DraftsFragment code 


Create PraftsFragmewt 

When the user clicks on the drafts option in the navigation drawer, 
we’ll show DraftsFragment. Select the com. hfad. catchat 
package in the app/src/main /java folder, and create a new blank 
fragment named “DraftsFragment” with a layout called of “fragment_ 
drafts”. Then replace the code for DraftsFragment.java with ours below: 

package com.hfad.catchat; 



Fragments/activities 
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Options 

Drawer 


Dra'P-bFragmeh-fc —^ prafts 



import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 

public class DraftsFragment extends Fragment 


□ 

CatChat 

L Q 

app/src/main 

^3 


java_ 

MT3 


com. hfad. catchat 



@Override 


DraftsFragment.java 


public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_drafts, container, false); 

} 


Next replace the code for fragment_drafts.xml too: 


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.catchat.DraftsFragment"> 


□ 

CatChat 


413 

app/src/main 

LQ 


<TextView 

android:layout_width="match_parent" 
android:layout_height="match_j?arent" 
android:text="Drafts" /> 
</LinearLayout> 


es _ 

^3 


layout 



frag m ent_d rafts, xm I 
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Create SentltemsFragment 

We’ll show SentltemsFragment when the user clicks on the 
sent items option in the navigation drawer. Highlight the com. 
hfad. cat chat package in the app / src / main /java folder, and 
create a new blank fragment named “SentltemsFragment” with 
a layout called “fragment_sent_items’\ Then update the code for 
SentltemsFragmentjava to match our code below: 

package com.hfad.catchat; 



navigation drawers 
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Options 

Drawer 


ISent items 



import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 


□ 

CatChat 

app/src/main 

java 


public class SentltemsFragment extends Fragment { 


com.hfad.catchat 

Lo 


@Override 


SentltemsFragmentjava 


public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_sent_iterns, container, false); 

} 


And here’s the code for fmgment_sent_items.xml (update your version): 


<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.catchat.SentltemsFragment"> 


□ 

CatChat 

4T3 

app/src/main 

4 ! 3 


<TextView 

android:layout_width="match_j?arent" 
android:layout_height="match_parent" 
android:text="Sent items" /> 
</LinearLayout> 


LQ 

layout 


fragment_sent_items.xml 
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TrashFragment code 


Create TrashFragment 


When the user clicks on the trash option in the navigation drawer, 
we’ll show TrashFragment. Highlight the com. hf ad. cat chat 
package in the app/src/main /java folder, and create a new blank 
fragment named “TrashFragment” with a layout called of “fragment, 
trash”. Then replace the code for TrashFragment.java with ours below: 

package com.hfad.catchat; 

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.Layoutlnflater; 
import android.view.View; 
import android.view.ViewGroup; 


Fragments/activities 

Header 

Options 

Drawer 


TVashFvagiwen-k —^ 


public class TrashFragment extends Fragment { 


□ 

CatChat 

HU 

app/sre/main 

HB 

java_ 

43 

com.hfad.catchat 



U 


TrashFragment.java 


@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container. 

Bundle savedlnstanceState) { 

return inflater.inflate(R.layout.fragment_trash, container, false) 

} 


Next replace the code for fragment_trash.xml too: 


<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.catchat.TrashFragment"> 


□ 

CatChat 

HU 

app/sre/main 


<TextView 

android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:text="Trash" /> 
</LinearLayout> 


res 


43 

layout 


i</*mii 

f rag m e n t_tras h. xm I 


We’ve now created all the fragments we need. Next, we’ll create a 
toolbar we can include in our activities. 
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Create a toolbar layout 

We’re going to add a toolbar in a separate layout so that we can include 
it in each activity’s layout (we’ll create our activities soon). Switch to the 
Project view of Android Studio’s explorer, select the app /src/res/main /layout 
folder, then go to the File menu and choose New —> Layout resource file. 
When prompted, name the layout file “toolbar_main”, then click on OK. 



Next, open toolbarjmain.xml^ and replace the code Android Studio has 
created for you with the following: 

This is -the same xoolbav toAt 

<android. support. v7 . widget. Toolbar ' ' we ’' /e use <* m Previous thaflev-s. 

xmlns:android="http://schemas.android.com/apk/res/android" 


navigation drawers 
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CatChat 
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app/sre/main 
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android: layout_width="match_j?arent" 
android:layout_height="?attr/actionBarSize M 
android:background="?attr/colorPrimary" 

android:theme= M Qstyle/ThemeOverlay.AppCompat.Dark.ActionBar" /> 



toolbar_ 

main.xml 


Before we can use the toolbar in any of our activities, we need to 
change the theme used by your activity. We’ll do this in app’s style 
resource. 


First, open AndroidManifest.xml, and make sure that the value of the 
theme attribute is set to "@style/AppTheme". Android Studio may 
have set this value for you; if not, you’ll need to update it to match ours 
below: 


□ 

CatChat 


HD 


<?xml version="1.0" encoding="utf-8"?> 

<manifest ...> 

Application 

android:allowBackup="true" 
android:icon="Qmipmap/ic_launcher" 
android:label="©string/app_name" 
android:roundIcon="Qmipmap/ic_launcher_round" 
android:supportsRtl="true" /Udvoid Studio may have alveady 

android:theme=" @ style/AppTheme " > added this value tor you- 

<activity android:name=".MainActivity"> 


app/sre/main 

AndroidManifest.xml 


</activity> 

</application> 

</manifest> 

We’ll update the AppTheme style on the next page. 
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use the right theme 


Update the app's theme 

Next, we’ll update the AppTheme style so that it uses a theme 
of "Theme . AppCompat. Light. NoActionBar We’ll also 
override some of the colors that are used in the original theme. 



Fragments/activities 

Header 

Options 

Drawer 


First, open the app/src/main/res/values folder and check that Android 
Studio has created a file for you called styles.xml. If this file doesn’t 
exist, you’ll need to create it. To do this, select the values folder, then 
go to the File menu and choose New —> “Values resource file”. When 
prompted, name the file “styles”, then click on OK. 

This “theme removes “the 
de-faul-t app bav (weVe 

<resources> . ^ « ? ladm 9 it «ith a toolbar). app/src/main_ 


□ 

CatChat 


Next, update styles.xml so that it matches ours: 


4=3 




<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
<item name="colorPrimary">@color/colorPrimary</item> 

<item name="colorPrimaryDark M >@color/colorPrimaryDark</item> 
<item name="colorAccent M >@color/colorAccent</item> 

</style> Androiid Studio may have 

</resources> ..... 


L _I 


— 

4=3 

values 


styles.xml 


added -these dolors -for you. 


The AppTheme style uses color resources, and these need to be 
included in colors.xml. First, make sure that Android Studio has 
created this file for you in the app/src/main/res/values folder (if it 
hasn’t, you’ll need to create it yourself). Then update colors.xml so 
that it matches our code below: 

<?xml version="1.0" encoding="utf-8"?> 


□ 

CatChat 

4=3 


<resources> 

<color name="colorPrimary">#3F51B5</color> 
<color name="colorPrimaryDark">#303F9F</color> 
<color name="colorAccent M >#FF4081</color> 
</resources> 


app/src/main 

MB 


Now that we’ve set up a style so that we can use a toolbar, we’ll 
create two activities for the help and feedback options in the 
navigation drawer. We’ll display these activities when the user 
selects the appropriate option. 


res 

4=1 


Add these dolors i-f 
Android Studio has* t 
already done it -for you 


values 


colors.xml 
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Create HelpActivity 


We’ll start by creating HelpActivity. Select the com. hf ad. catchat 
package in Android Studio, then go to the File menu and choose New. Select the 
option to create a new empty activity, and give it a name of “HelpActivity”, with 
a layout name of “activity_help”. Make sure the package name is com. hf ad. 
catchat, and check the Backwards Compatibility (AppCompat) 
checkbox. Then update activityJielp.xml so that it matches ours below: 

<?xml version= M l.0" encoding="utf-8"?> 

<LinearLayout xmlns:android= M http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 

tools:context="com.hfad.catchat.HelpActivity"> 


navigation drawers 
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<include 

layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 



<TextView 

android:layout_width="match_j?arent" 
android:layout_height="match_j?arent 
android:text="Help" /> 
</LinearLayout> 

Next update Help Activity.java to match our version: 

package com.hfad.catchat; 


WcVc adding a -toolbar and 
w ttelf w *to HelpActivity 


□ 

CatChat 

4B 

app/sre/main 

HB 
MB 

layout 


res 


activity_help.xml 


import android.support.v7.app.AppCompatActivity; 

import android.os.Bundle; needs -to extend 

import android, support .v7 .widget.Toolbar; because were usinj an AppCompa*b “tbcmC* 


£ 


public class HelpActivity extends AppCompatActivity { 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_help); 

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar) 
setSupportActionBar(toolbar); 

} 


□ 

CatChat 

4 ■ 

app/sre/main 

MB 


java 


4T3 


com.hfad.catchat 

U 


HelpActivity.java 
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FeedbackActivity code 


Create FeedbackActivity 

Finally, select the com. hf ad. cat chat package again and create an 
empty activity called “FeedbackActivity”, with a layout name of “activity_ 
feedback”. Make sure the package name is com .hfad.cat chat, and 

check the Backwards Compatibility (AppCompat) checkbox. 

Then update activity_feedback.xml so that it matches ours below: 

<?xml version="1.0" encoding= M utf-8 M ?> 

CLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 


xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" □ 

android:layout_height="match_parent" CatChat 

android:orientation="vertical" 

tools : context="com.hfad. catchat. FeedbackActivity"> app/sre/main 

M3 


Fragments/activities 

Header 

Options 

Drawer 
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<include 

layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 

<TextView 

android:layout_width="match_parent" 
android:layout_height="match_j?arent" 
android:text="Feedback" /> 
</LinearLayout> 


Co 

43 

layout 


|</xmll 

activity jfeedback.xml 


Then update FeedbackActivity.java to match this version: 

package com.hfad.catchat; 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

This attWitV ’ 

import android. support. v7 . widget. Toolbar; £ ?? Com P atMWity as well- 


This adiivi-ty needs -to extend 


public class FeedbackActivity extends AppCompatActivity { 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_feedback); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar) 
setSupportActionBar(toolbar); 

} 


□ 

CatChat 


4a 

app/sre/main 




java 


43 


com.hfad.catchat 

l_c 


FeedbackActivity.java 
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navigation drawers 


We need to build a navigation drawer 

We’ve now added all the fragments and activities to our project 
that the options in the navigation drawer will link to. Next, we’ll 
create the navigation drawer itself. 

The navigation drawer comprises two separate components: 


v/ 


Fragments/activities 

Header 

Options 

Drawer 


© 


A navigation drawer header. 

This is a layout that appears at the top of the navigation drawer. It 
usually consists of an image with some text, for example a photo of the 
user and their email account. 


© 


This is the header well Create__ 

It Consists o-p ah image and 
two pieces Op text. 



A set of options. 

You define a set of options to be displayed in the navigation drawer 
underneath the header. When the user clicks on one of these options, 
the screen for that option is displayed as a fragment within the 
navigation drawer’s activity, or as a new activity. 


The navigation 
drawer will Contain — 
these options. 





Mesagez 

✓ 

Draftz 

► 

Sent mesagez 

i 

In da trash 

Support 

? 

Halp 

a 

Giv us feedback 


We’re going to build these components, then use them in 
MainActivity to build a navigation drawer. We’ll start with the 
navigation drawer header. 
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create header 


Create the navigation drawer's header 

The navigation drawer’s header comprises a simple layout that 
you add to a new layout file. We’re going to use a new file called 
nav—header, xml. Create this file by selecting the app/src/main/res/ 
layout folder in Android Studio, and choosing File—>New—>Layout 
resource file. When prompted, name the layout “nav_header”. 

Our layout is composed of an image and two text views. This means 
we need to add an image file to our project as a drawable, and two 
String resources. We’ll start with the image file. 

Add the image file 

To add the image file, first switch to the Project view of Android 
Studio’s explorer if you haven’t already done so, and check whether 
the app/src/main/res/drawable folder exists in your project. If it’s not 
already there, select the app/src/main/res folder in your project, go to 
the File menu, choose the New... option, and then click on the option 
to create a new Android resource directory. When prompted, choose a 
resource type of drawable, name it “drawable”, and click on OK. 



Fragments/activities 

Header 

Options 

Drawer 



The header 
Contains an 
(magel/iew... 


...and two Te*t\/iews. 


Once you’ve created the drawable folder, download the file kitten_small.jpg 
from https://git.io/v9oet , and add it to the drawable folder. 


Add the String resources 

Next, we’ll add two String resources, which we’ll use for the text 
views. Open the file app/sre/main/res/values/strings.xml, then add the 
following resource: 

<resources> 


□ 

CatChat 


HTJ 

app/sre/main 


Android Studio may 
have already added 

<string name= M app_name M >CatChat</string> * tV^is String by de-fa t 

<string name="user_name">spot@catchat.com</string> 

</resources> 




L Q 

values 


strings.xml 


Now that you’ve added the resources, we can write the layout code. 
You’re already familiar with the code we need to do this, so we’re 
going to give you the full code on the next page. 
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The full nav_header.xml code 

Here’s our full code for navjieader.xml ; update your version of the 
file to match ours: 


v/ 
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<?xml version="1.0" encoding= M utf-8 M ?> 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 

android: layout_width="match_j?arent" We Ye e%pli£itly sett’mj the height o*C “the layout to IGOdf 

android:layout_height="180dp" --- so that it doesn't take up too mudh spade m the drawer. 

android:theme="@style/ThemeOverlay.AppCompat.Dark" > 

The image background is guite dark, so 

<ImageView we re using -this line to make the text light 

android:layout_width="wrap_content" 


android:layout_height="wrap_content" 
android:scaleType="centerCrop" 
android:src="@drawable/kitten small" /> 


<LinearLayout 


□ 

CatChat 

app/sre/main 
1 ■ 


android:layout_width="wrap_content" 


android:layout_height="match_parent" 


android:orientation="vertical" 
android:gravity="bottom|start" 
android:layout_margin="16dp" > 


This LineavLayout will appear 
on top o( the ImayView. 
Were using it to display text 
at the botto rw o-f the innate. 


Co 

LQ 

layout 


nav_header.xml 


<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/app_name" 

android:textAppearance="@style/TextAppearance.AppCompat.Bodyl" /> 

<TextView Th ' s ,s a built-in style that 

makes the text look slightly 

android: layout_width="wrap_content" bolder. |t domes -Prom the 

android: layout_height="wrap_content" AppCompat Support Library, 

android:text="@ string/user_name" /> 

</LinearLayout> 

</FrameLayout> 


Now that we’ve created the drawer’s header, we’ll create its list of 
options. 
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add strings 


The drawer gets its options from a menu 

The navigation drawer gets its list of options from a menu 
resource file. The code to do this is similar to that needed to add a 
set of options to an app bar. 

Before we look at the code to add the options to the navigation 
drawer, we need to add a menu resource file to our project. To 
do this, select the app/src/main /res folder in Android Studio, go 
to the File menu, and choose New. Then select the option to 
create a new Android resource file. You’ll be prompted for the 
name of the resource file and the type of resource. Give it a name 
of “menu_nav”, give it a resource type of “Menu”, and make 
sure that the Directory name is “menu”. When you click on OK, 
Android Studio will create the file for you. 



Fragments/activities 

Header 

Options 

Drawer 


Next we’ll add String resources for the titles of our menu items 
so that we can use them later in the chapter. Open strings.xml and 
add the following resources: 

<resources> 


□ 

CatChat 


<string name="nav_inbox">Mesagez</string> 

<string name="nav_drafts">Draftz</string> 

<string name="nav_sent">Sent mesagez</string> 

<string name= M nav_trash M >In da trash</string> 

<string name= M nav_support M >Support</string> 

<string name="nav_help">Halp</s tring> 

<string name="nav_feedback">Giv us feedback</string> 
</resources> 


4 ■ 

app/src/main 

ma 


res 


KT3 

values 


strings.xml 


Next we can start constructing our menu code. 


We need to create a menu with two sections 

f 

►X 

Mesagez 

As we said earlier, we want to split the items in our navigation 

These ave 

✓ 

Draftz 

drawer into two sections. The first section will contain options for 
the main places in the app the user will want to visit: her inbox, 

the app s j 

n^aih options. / 

► 

Sent mesagez 

draft messages, sent items, and trash. We’ll then add a separate 
support section for help and feedback options. 

• 

In da trash 

Let’s start by adding the main options. 

This ( 

Support 



is the 
suppovt < 

? 

Halp 


section. 1 

es 

Giv us feedback 
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Add items in the order you want them 
to appear in the drawer 



navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


When you design a set of options for a navigation drawer, you 
generally put the items the user is most likely to want to click on at 
the top of the list. In our case, these options are for the inbox, draft 
messages, sent items, and trash. 


You add items to the menu resource file in the order in which you want 
them to appear in the drawer. For each item, you specify an ID so 
you can refer to it in your Java code, and a title for the text you want 
to appear. You can also specify an icon that will appear alongside the 
item’s text. As an example, here’s the code to add an “inbox” item: 


□ 

CatChat 

K3 


<?xml version="1.0" encoding="utf-8"?> 

<menu xmlns:android="http://schemas.android.com/apk/res/android"> 

You need io <jive -the item ar> IP 
^—N so -that vouv activity to&t dan 


app/sre/main 

H3 


<item 

android: id=" @+id/nav_inbox " respond -to it be'mj dlidked 

android:icon= M @android:drawable/sym_action_email" 
android:title="@string/nav_inbox" /> 

This is the te*t 
that appears in the 
navigation dv-awev*. 


^3 


A. 


I</XmlI 

menu_nav.xml 


This is a built-in drawable you 
ta« use to display a» email idon. 


</menu> 


In the above code, we’re using one of Android’s built-in icons: 

" @android: drawable/sym_action_email" . Android 
comes with a set of built-in icons that you can use in your apps. The 
" @android: drawable" part tells Android you want to use one of 
these icons. You can see the full list of available icons when you start 
typing the icon name in Android Studio: 



and roid : id^'fa+id/na^inbox" 

an d roid : ic on ="@and roid: d rawa bl e/[' 

android ; title @android:drawab0 . sym_a<:tion_email 


These av-e 
some of tl 
r fa&ro id 

built-in 

dvawables. 


@and roid:d rawab le/ic_menu_send 
@a n d roid:drawab L e/ ic_me n u_e dit 
(aand roid: d rawab le/a lert_da rk_f rame 
@a n d roid:d rawa b le/ a le rt_ lig h t_f ra me 
@an d roid:d rawa ble/ a rrow_d own_flo a t 
@a n d ro id: d rawa b le / a r row_u p_f lo a t 
@android:drawab le/bottom_bar 
@and roid:drawab le/btn_defauIt 
@and roid:drawab le/btn_default_small 
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group items 


How to group items together 

As well as adding menu items individually, you can add them as part 
of a group. You define a group using the <group> element like this: 

<menu xmlns:android="http://schemas.android.com/apk/res/android"> 

<group> 

. . . ^— /\r>y i'bew'S you want to 
</group> ^ 3° V ' e ' re ' 

</menu> 

This is useful if you want to apply an attribute to an entire 
group of items. As an example, you can highlight which item 
in the drawer the user has selected by setting the group’s 
android: checkableBehavior attribute to "single". This 
behavior is helpful when you intend to display screens for the items 
as fragments inside the navigation drawer’s activity (in our case 
MainActivity), as it makes it easy to tell which option is currently 
selected: 


y/ Fragments/activities 
~ Header 
Options 
Drawer 


<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
<group android:checkableBehavior="single"> 

? 

oil,.. TU~<;a„ ttata ...jk itc rn tkt 3.0.P will 

be nigmiglvted (the option -the user selects)- 

</menu> 


You can highlight an item in the navigation drawer by default by 
setting its android: checked attribute to "true". As an example, 
here’s how you highlight the inbox item: 


<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
<group android:checkableBehavior="single"> 

<item 

android:id="@+id/nav_inbox" 

android:icon="@android:drawable/sym_action_email" 
android:title="@string/nav_inbox" 

android:checked="true" /> 


</group> 
</menu> 


T 

Tb'is hijhlijhts *tbe iierw m *tbe 
havijatioh dvawev- by de-fault 


We’ll show you the full code for the first four menu items on the next page. 
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Well use a group for the first section 

We’re going to add the inbox, drafts, sent messages, and 
trash options to our menu resource file as a group, and 
highlight the first item by default. We’re using a group for 
these items because the screen for each option is a fragment, 
which we’ll display in MainActivity. 

Here’s our code; update your version of menu_nav.xml to 
match ours. 

<?xml version="1.0" encoding= M utf-8"?> 



navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


The dode oh this 
page adds these 
tou\t items. 


►X 

Mesagez 1 

✓ 

Draftz 

► 

Sent mesagez 

• 

In da trash 


<menu xmlns:android="http://schemas.android.com/apk/res/android"> 


<group android:checkableBehavior="single"> 

<item 

android:id="@+id/nav_inbox M 
android:icon= M @android:drawable/sym_action_email" 
android:title="@ s tring/nav_inbox" 
android:checked= M true" /> 


Add -this <yrouf> and the towr items it 
Contains to youv menu vesouvde tile so 
they'll appeav in the navigation dvav/ev- 


<item 

android:id="@+id/nav_drafts" 
android:icon= M @android:drawable/ic_menu_edit M 
android:title="@string/nav_drafts" /> 

<item 

android:id= M @+id/nav_sent M 

android:icon="@android:drawable/ic_menu_send M 
android:title="@string/nav_sent" /> 

<item 

android:id="@+id/nav_trash" 

android:icon="@android:drawable/ic_menu_delete 
android:title="@string/nav_trash" /> 

</group> 


□ 

CatChat 

HID 

app/sre/main 

'-a 

res 


menu 


menu_nav.xml 


</menu> 


That’s the first group of items sorted. We’ll deal with the 
remaining items next. 
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submenus 


Add the support section as a submenu 

The second set of items in the navigation drawer forms a 
separate section. There’s a heading of “Support,” along with 
help and feedback options for the user to click on. 

To create this section, we’ll start by adding the Support heading 
as a separate item. As it’s a heading, we only need to give it a 
title; it doesn’t need an icon, and we’re not assigning it an ID as 
we don’t need it to respond to clicks: 


<item android:title="@string/nav_support"> 
</item> 


v/ 

V 


Fragments/activities 

Header 

Options 

Drawer 


This adds a Support heading 
"to -the navigation drawer. 


We want the help and feedback options to appear within 
the Support section, so we’ll add them as separate items in a 
submenu inside the support item: 


►X 

Mesagez | 

✓ 

Draftz 

► 

Sent mesagez 

• 

In da trash 

Support 1 

? 

Halp 


Giv us feedback 

L i 


□ 


CatChat 


This 

de-Pmes a 
submenu 
inside ihe 
Suppo\rt 
i-tem. 


<item android:title="@string/nav_support"> 

<menu> 

<item 

android:id= M @+id/nav_help" 

android:icon="@android:drawable/ic_menu_help M 
android:title= M @string/nav_help M /> 

<item 

android:id= M @+id/nav_feedback" 

android:icon= M @android:drawable/sym_action_email 
android:title="@string/nav_feedback" /> 

</menu> 

</item> 


Note that we haven’t put these items inside a group, so if the 
user clicks one of them, it won’t be highlighted in the navigation 
drawer. This is because the help and feedback options will be 
displayed in new activities, not as fragments in the navigation 
drawer’s activity. 


4a 

app/src/main 


03 


menu_nav.xml 



We’ll show you the full menu code on the next page. 
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The full menu_nav.xml code 

Here’s the full code for menu_nav.xml\ update your version of the 
code to match ours: 


v/ 

V 


navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


<?xml version="1.0" encoding="utf-8"?> 

<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
<group android:checkableBehavior="single"> 

<item 

android:id="@+id/nav_inbox" 

android:icon="@android:drawable/sym_action_email" 
android:title="@string/nav_inbox" /> 

<item 

These are / android: id="@+id/nav_drafts" 

the r»aih / android: icon="Qandroid: drawable/ic_menu_edit M 

options. \ android: title=" @string/nav_draf ts” /> 

<item 

android:id="@+id/nav_sent M 

android:icon="Qandroid:drawable/ic_menu_send" 
android:title="@string/nav_sent" /> 

<item 

android:id="@+id/nav_trash" 

android:icon="Qandroid:drawable/ic_menu_delete" 
android:title="@string/nav_trash" /> 

</group> 


The to de on this pa$e 
dveatcs the -full wenu. 

'I' 


►X 

Mesagez 

✓ 

Draftz 

► 

Sent mesagez 

t 

In da trash 

Support 

? 

Halp 


Giv us feedback 


□ 

CatChat 


This 
is the 
support 
section. 


>-c□ 


■ 


<item android:title="@string/nav_support"> L CZI 

<menu> app/src/main 

<item 

android:id= M @+id/nav_help" 

android:icon= M @android:drawable/ic_menu_help" 
android: title="@string/nav_help"/> menu — 

<item |</ Xmll 

android: id= M @+id/nav_f eedback" menu_nav.xml 

android:icon="@android:drawable/sym_action_email" 
android:title="@string/nav_feedback" /> 

</menu> 

</item> 

</menu> 

Now that we’ve added a menu and navigation drawer header 
layout, we can create the actual drawer. 
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create drawer 


How to create a navigation drawer 

You create a navigation drawer by adding a drawer layout to your activity’s 
layout as its root element. The drawer layout needs to contain two things: 
a view or view group for the activity’s content as its first element, and a 
navigation view that defines the drawer as its second: 

<?xml version="1.0" encoding="utf-8"?> 

<android. support. v4 . widget. Drawer Layout 4 . — The Drawer Layout de mes he 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 

android:id="@+id/drawer_layout" <=- You give it a« |£> so you da« 

android:layout_width="match_parent" veter to it in your activity Code- 
android: layout_height="match_j?arent" > 


v/ 

V 


Fragments/activities 

Header 

Options 

Drawer 


<LinearLayout 

The DrawerLayout^s \ android:layout_width="match_j?arent" 
-first view is a layout J android: layout_height="match_parent" 


u the activity's 
rwa'm Co^te^t- You 
see it when the 
drawer is closed- 


</LinearLayout> 


The Navi<jation\/iew de-Pines 
-the drawer's Contents- 


This attaches the 


<android.support.design.widget.NavigationView 
android:id="@+id/nav_view" 
android:layout_width="wrap_content" 
drawer to the start android: layout_height="match_j?arent" 

ed$e o-f the activity- —^android: layout_gravity="start" This is the layout -for 

(■the le-Ct tor le-fi- a pp:headerLayout="@layout/nav_header"^ - ' dvaxer s header, 
to-rioiht lan<\uays). 

^ ann • monii =" (dmami /mann naw" /> _ 


app: menu=" @menu/menu_nav" 

</android. support. v4 . widget. DrawerLayout> to^ining the drawer's options. 


'This is ■the menu resource -Pile 


There are two key <NavigationView> attributes that you use to control 
the drawer’s appearance: headerLayout and menu. 

The app : headerLayout attribute specifies the layout that should be 
used for the navigation drawer’s header (in this case navjieader.xml). This 
attribute is optional. 

You use the app : menu attribute to say which menu resource file contains 
the drawer’s options (in this case menu_drawer.xmJ). If you don’t include this 
attribute, your navigation drawer won’t include any items. 
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The full code for activity_main.xml 

We’re going to add a navigation drawer to MainActivity’s layout that 
uses the header layout and menu we created earlier in the chapter. The 
layout’s main content will comprise a toolbar and frame layout. We’ll use 
the frame layout later in the chapter to display fragments. 

Here’s our full code for activity_main.xml\ update your code to match ours: 



navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


■ The layout's root element is a PrawerLayout- 


<?xml version="l.0" encoding="utf-8"?> 

<android.support.v4.widget.DrawerLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 

android:id="@+id/drawer_layout" <-|i has a* IV so we dan ve-Cev -to 

android: layout_width="match_parent" i-fc in our afrtiviiy Code later, 
android:layout_height="match_parent" > 


z .— This is -for the drawer's main Content- 

<LinearLayout 

android:layout_width="match_parent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" > 


□ 

CatCh at 


The activity's 
^ai n Content is 
Composed ot a 
Toolbar, and a 
Fra me Layout 
in which 
we'll display 
-fragments. 


<include 

layout="@layout/toolbar_main" 
android:id="@+id/toolbar" /> 


app/sre/main 


>-0 


<FrameLayout 

android:id="@+id/content_frame" 
android:layout_width="match_parent" 
android:layout_height="match_j?arent" /> 
</LinearLayout> 


CO _ 

LQ 

layout 


activity_main.xml 


The Navi^atiorA/iew de-fines the 
_drawer's appearance and w*ueh o-f its^ 

<android. support .design, widget. NavigationView behavior. We're (yvinj it an |P> as well 

android: id="@+id/nav_view" need to re-fer to it in our activity Code. 

android:layout_width="wrap_content" 
android:layout_height="match_j?arent" 
android:layout_gravity="start" 
app:headerLayout="@layout/nav_header" 
app:menu="@menu/menu_nav" /> 

</android.support.v4.widget.DrawerLayout> 


We're usin$ the layout we Created earlier 
as the drawer's header, and the menu 
resource -file -for the list of options. 


Before we run the app to see how the navigation drawer’s looking, we’ll 
update MainActivity to display InboxFragment in the frame 
layout when the activity gets created. 
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add InboxFragment 


Add InboxFragment to 
MainActivity's frame layout 



Fragments/activities 

Header 

Options 

Drawer 


When we created our menu resource file, we set the inbox option to 
be highlighted by default. We’ll therefore display InboxFragment 
in MainActivity’s frame layout when the activity is created so 
that it matches the drawer’s contents. We’ll also set the toolbar as 
the activity’s app bar so that it displays the app’s title. 


Here’s our code for MainActwity.jam; replace your version of the 
code to match ours: 


□ 

CatChat 


package com.hfad.catchat; 


import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 
import android.support.v4.app.Fragment; 


4H 

app/src/main 

H2a 


java 


40 


com.hfad.catchat 

L a. 

import android. support. v4 . app. FragmentTransaction; MainActivity.java 


public class MainActivity extends AppCompatActivity { SU ^ C exiehds 

the %Co* P atAdtivity class, 
as \weVe using an AppCompat 

@Override then>e and support -fragments. 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar (toolbar) ; ^ Toolbar as tbe activity s app bar. 


Use a -Pragmeht 

tvahsa^tioh -to 
display ah ihs-fcahde 


Fragment fragment = new InboxFragment(); 

FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 
IhboxFvagmCht. I ft - add ( R • id • content_f rame, fragment) ; 

I ft.commit(); 


} 


} 


Let’s see what happens when we run the app. 
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Test drive the app 


When we run the app, InboxFragment is displayed in MainActivity. 
When you swipe the app from the left side of the screen (in left-to-right 
languages like English) the navigation drawer is displayed. The navigation 
drawer contains a header layout, and the list of options we defined in our 
menu resource file. The first option is automatically highlighted: 


v/ 

V 


navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


I* vgh't—-to—le-P-t languages, -the 
drawer will appear on -the right 
side or the screen instead- 



Clicking on the drawer options doesn’t do anything yet, 
as we haven’t written any code in MainActivity to 
control how the drawer operates. We’ll do that next. 
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steps 


What the activity code needs to do 

There are three things we need our activity code to do: 



Fragments/activities 

Header 

Options 

Drawer 


O 


Add a drawer toggle. 

This provides a visual sign to the user that the activity contains a navigation 
drawer. It adds a “burger” icon to the toolbar, and you can click on this icon 
to open the drawer. 


o 



Make the drawer respond to clicks. 

When the user clicks on one of the options in the navigation drawer, we’ll 
display the appropriate fragment or activity and close the drawer. 


Me* the user elieks o* o*e o-P 
the mai* options, well display the^^ 
+ragme*t tor that optio* a*d 
£lose the drawer. The optic* will 
be highlighted i* the *avigatio* 
drawer the *ext time we ope* it. 


VVhe* the user dlitks o* o*e 
o*f these options, well start 
the appropriate activity 



@ 


Close the drawer when the user presses the Back button. 

If the drawer’s open, we’ll close it when the user clicks on the Back button. If 
the drawer’s already closed, we’ll get the Back button to function as normal. 


We’ll start by adding the drawer toggle. 
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Add a drawer toggle 


The first thing we’ll do is add a drawer toggle so that we can open 
the navigation drawer by clicking on an icon in the toolbar. 

We’ll start by creating two String resources to describe the “open 
drawer” and “close drawer” actions; these are required for 
accessibility purposes. Add the two Strings below to strings.xml: 


v 

v 


navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


□ 

CatChat 


<string name= M nav_open_drawer">Open navigation drawer</string> 
<string name= M nav_close_drawer M >Close navigation drawer</string> 


4H 

app/src/main 

43 


43 


You create the drawer toggle in the activity’s onCreate () method 
by creating a new instance of the ActionBarDrawerToggle 
class and adding it to the drawer layout. We’ll show you the code for 
this first, then add it to MainActivity later in the chapter. 


values 



strings.xml 


The ActionBarDrawerToggle constructor takes five 
parameters: the current activity, the drawer layout, the toolbar, and 
the IDs of two String resources for opening and closing the drawer 
(the String resources we added above): 


Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 


DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle (this, The £u\rveirrt activity 
'P The activity's Pv-awevLayoul —^drawer, 

toolbar, The activity's toolbar 

These Strings are needed tor accessibility, f R - strin 5 - nav -°P en - d rawer, 

R. string. nav_close_drawer) ; 


bu\rge\r i£oh -fco 

you\r -too!bav. 


Once you’ve created the drawer toggle, you add it to the drawer 
layout by calling the DrawerLayout addDrawerListener () 
method, passing the toggle as a parameter: 

drawer. addDrawerListener (toggle) ; 

Finally, you call the toggle’s syncState () method to synchronize 
the icon on the toolbar with the state of the drawer. This is because 
the icon changes when you click on it to open the drawer: 

toggle.syncState(); 


□ 

CatChat 

4H 

app/src/main 

MB 

java_ 

4a 

com.hfad.catchat 

LO 


MainActivity.java 


We’ll add the drawer toggle to MainActivity’s onCreate () 
method in a few pages. 
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respond to clicks 


Respond to the user 
clicking items in the drawer 



Fragments/activities 

Header 

Options 

Drawer 


Next, we’ll get MainActivity to respond to items in the 
navigation drawer being clicked by getting the activity to implement a 
NavigationView.OnNavigationltemSelectedListener 

interface. Doing this means that whenever an item is 
clicked, a new method we’ll create in MainActivity, 
onNavigationltemSelected (), will get called. We’ll use this 
method to display the screen for the appropriate option. 

First, we’ll get MainActivity to implement the interface using the 
code below. This code turns MainActivity into a listener for the 
navigation view: 


□ 

CatChat 

4B 

app/src/main 

java_ 

com.hfad.catchat 

LQ 


import android.support.design.widget.NavigationView; 


MainActivity.java 


public class MainActivity extends AppCompatActivity 


} 


implements NavigationView.OnNavigationItemSelectedListener 


Implement**) “this *m*ter*Cace means -that 7°^ activity dan 
respond to the user clicking options in the navigation drawer. 


{ 


Next we need to register the listener, MainActivity, with the 
navigation view so that it will be notified when the user clicks on one 
of the options in the drawer. We’ll do this by getting a reference to the 
navigation view in the activity’s onCreate () method, and calling its 
setNavigationltemSelectedListener () method: 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 


NavigationView navigationView = (NavigationView) findViewByld(R.id.nav_view); 
navigationView.setNavigationltemSelectedListener(this); 

} T 

This rejis-ters the activity as a lis-tener 

Finally, we need to implement the °* ‘^'J^'kioK view sowill be 

onNavigationltemSelected () method. |r '°^ 1 uscv " ^‘^s °* tern. 
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Implement the 

onNavigationltemSelectedl) method 



navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


The onNavigationltemSelected () method gets called 
when the user clicks on one of the items in the navigation 
drawer. It takes one parameter, the Menu Item that was clicked, 
and returns a boolean to indicate whether the item in the 

drawer should be highlighted: TW|$ . ta | )ed ^enevev an item in the 

dvavweyr is clicked- Its parameter is the dlitked item. 


@Override 

public boolean onNavigationltemSelected(Menultem item) 
//Code to handle navigation clicks 


{ 


} 

The code in this method needs to display the appropriate screen 
for the clicked item. If the item is an activity, the code needs to 
start it with an intent. If the item is a fragment, it needs to be 
displayed in MainActivity’s frame layout using a fragment 
transaction. 

When you display fragments by clicking on an item in a 
navigation drawer, you don’t generally add the transaction to 
the back stack as we did previously. This is because when the 
user clicks on the Back button, they don’t expect to revisit every 
option they clicked on in the drawer. Instead, you use code like 
this: 


□ 

CatChat 

4H 

app/src/main 

HU 

java_ 

LQ 

com.hfad.catchat 

La 


MainActivity.java 


FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 


ft. replace (R. id. content frame, fragment) ; tl* • . C i i , . . 

- x I his is the same fragment transaction Code you ve 

ft. commit (); seen be-fore except that we're not adding the 

transaction to the activity's back stack. 

Finally, you need to close the drawer. To do this, you get a 
reference to the drawer layout, and call its closeDrawer () 
method: 


DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 


drawer.closeDrawer(GravityCompat.START); 

This closes the drawer so that it slides back to the activity’s 
start edge. 


Were using ^ravityCompat-START because 
we ve attached the drawer to the activity's 
start edge. It we'd attached it to the end 
edge, we d use ihsiead. 


You now know everything you need in order to write the code 
for the onNavigationltemSelected () method, so 
have a go at the following exercise. 
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magnets 


/f t& \ 


Code Magnets 

When the user clicks on an item in the navigation drawer, we need to 
display the appropriate screen for that item. If it's a fragment, we need 
to display it in the content_f rame frame layout. If it's an activity, 
we need to start it. Finally, we need to close the navigation drawer. 

See if you can complete the code below and on the next page. You 
won't need to use all of the magnets. 


QOverride 

public boolean onNavigationltemSelected(Menultem item) { 

int id = item. ; 

Fragment fragment = null; 

Intent intent = null; 

switch( ) { 

case R.id.nav_drafts: 

fragment = ; 


case R.id.nav sent: 


fragment = 


case R.id.nav trash: 


fragment = 


case R.id.nav_help: 


intent = new Intent ( 
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navigation drawers 


case R.id.nav_feedback: 

intent = new Intent ( , ) ; 

default: 

fragment = ; 

} 

if ( != null) { 

FragmentTransaction ft = getSupportFragmentManager(). 

ft.replace(R.id.content_frame, ); 

ft. ; 

} else { 

startActivity( ); 

} 

DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 

drawer. ( ) ; 

return true; 


j closeDrawer [ GravityCompat.START J 

[ beginTransaction() j 





intent 1 PraftsFragment()J 


TrashFragment() | 

| j break l 



SentltemsFragment() 


I 

FeedbackActivity | 


















































magnets solution 


/{ 



I 




Code Magnets Solution 

When the user clicks on an item in the navigation drawer, we need to 
display the appropriate screen for that item. If it's a fragment, we need 
to display it in the content_f rame frame layout. If it's an activity, 
we need to start it. Finally, we need to close the navigation drawer. 

See if you can complete the code below and on the next page. You 
won't need to use all of the magnets. 


QOverride 

public boolean onNavigationltemSelected(Menultem item) { 

6jet -the IP of the iten. that was seledted- 


int id = item. Ld^^'nldO |; 

Fragment fragment = null; 

Intent intent = null; 

switch ( I ^ 

case R.id.nav drafts: 


fragment = 

j~break j . 

case R.id.nav sent: 


DraftsFragment() I . 


fragment = 

1 b r eak ^ 

case R.id.nav trash: 


SentltemsFragment() 



Save an ins-tan£e o-P "the 
-Pragmen-t we wan-t io display 
in -the -Pvagrhen-t variable. 


fragment = 

J break [ 

case R.id.nav_help: 


TrashFragment() 1 ; 


intent = new Intent( this 


break 



ivity.classil.) ; 


Constvudt an intent to stavt 
ttelpAdtivity if the Help option's dlidked 
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navigation drawers 


case R.id.nav feedback: 


intent = new Intent( this 




If -the -feedback option is clicked, 
we need to start Feedback^ctivity. 


fragment = 


[ InboxFragment () ' ^ is ? ,a Y I^Fvajment by default, as 

mj--' its “the VlVst OftlOh \Y\ W dva>WCV-. 


if ( 


fragment ^ ! = 


null) { 


V 


l-f we need to display a -fragment, 
use a fragment transaction. 


FragmentTransaction ft = getSupportFragmentManager() 


ft.replace(R.id.content_frame, I fragment 


. [ beginTransaction () ; 


ft commit () 

} else { 


} 


startActivity( 



If we need to display an activity, vse 
i\\t ’m-tent v/e tons-bru^ted *to sta\rt it 


DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 


drawer. 
return 



| GravityCompat.START 1 ); 


Finally, dose -the dv-awcv-. 


VVcMl add -this tode 
bo MamA^tivity java 

rn a Couple <£ pa$es. 



You didn't need bo use -these ^acine-ts. 

t 


: 


FeedbackActivity 


] 
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shut that drawer 


Close the drawer when the user 
presses the Pack button 



Fragments/activities 

Header 

Options 

Drawer 


Finally, we’ll override what happens when the Back button’s 
pressed. If the user presses the Back button when the navigation 
drawer’s open, we’ll close the drawer. If the drawer’s already 
closed we’ll get the Back button to function as normal. 

To do this, we’ll implement the activity’s onBackPressed () 
method, which gets called whenever the user clicks on the Back 
button. Here’s the code: 


@Override 


This gc-b called when -the 
Back button jcb pressed. 


public void onBackPressed() { 


□ 

CatChat 

43 

app/sre/main 

java_ 

com.hfad.catchat 

LQ 


MainActivity.java 


duvren'tly open, dose it 


DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 
if (drawer. isDrawerOpen (GravityCompat. START)) {^\ |.f -the drawer is 

drawer. closeDrawer (GravityCompat. START) ; 

} else { 

super.onBackPressed();. 

} 



Otherwise, call up -to the superclass 
onBackPressedO method- 


That’s everything we need for MainActivity. We’ll show 
you the full code over the next couple of pages, and then take it 
for a test drive. 


there,are no 

Dumb Questions 


% 


Do you have to use a navigation view for your drawer 
contents? 


Oj 


Can your activity contain more than one navigation 
drawer? 


No, but it’s much easier if you do. Before the Android Design 
Library came out, it was common practice to use a list view instead. 
This approach is still possible, but it requires a lot more code. 


Your activity can have one navigation drawer per vertical 
edge of its layout. To add a second navigation drawer, add an extra 
navigation view to your drawer layout underneath the first. 
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The full MainActivity.java code 

Here’s the full code for MainActivity.java ; update your version of 
the code to match ours: 


v/ 

V 


navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


package com.hfad.catchat; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

import android.support.v7.widget.Toolbar; 

import android.support.v4.app.Fragment; 

import android.support.v4.app.FragmentTransaction; 

import android.support.v4.widget.DrawerLayout; 
import android.support.v7.app.ActionBarDrawerToggle, 
import android.support.design.widget.NavigationView, 
import android.view.Menultern; 
import android.content.Intent; 
import android.support.v4.view.GravityCompat; 


□ 

CatChat 

Fa 

app/src/main 

ma 

java_ 

MB 

com. hfad .catchat 

U 


MainActivity.java 

We've using -these e*tva classes 
so we need to import them. 


public class MainActivity extends AppCompatActivity 

implements NavigationView.OnNavigationltemSelectedListener { 

A- 

Implementing this inter-fade means 

@Override ^ afrtWl ty ta * listen 4r clicks. 

protected void onCreate(Bundle savedlnstanceState) { 


super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

Toolbar toolbar = (Toolbar) findViewByld(R.id.toolbar); 
setSupportActionBar(toolbar); 


rura 

f 


DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, 

drawer, 
toolbar, 

R.s tring.nav_open_drawer, 

R.string.nav_close_drawer); 

drawer.addDrawerListener(toggle); 

toggle. syncS tate () ; Th c todt dohtihucs 

oh the hext page- 


Add a dvawev toggle 


(r 
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code, continued 


MainActivity.java (continued) 



Fragments/activities 

Header 

Options 

Drawer 


NavigationView navigationView = (NavigationView) findViewByld(R.id.nav_view); 
navigationView.setNavigationltemSelectedListener(this); 

Register -the activity with the 

Fragment fragment = new InboxFragment () ; navigation view as a lis-tcKtCV- 

FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 
ft.add(R.id.content_frame, fragment); 
ft.commit(); 


This method yb tailed when -the user 
tlitks on one 0 -f "the items in the dvawev. 


©Override 

public boolean onNavigationltemSelected(Menultem item) { 
int id = item.getltemld(); 

Fragment fragment = null; 

Intent intent = null; 


□ 

CatChat 


switch(id){ 

case R.id.nav_drafts: 

fragment = new DraftsFragment(); 
break; 

case R.id.nav_sent: 

fragment = new SentIternsFragment(); 
break; 

case R.id.nav_trash: 

fragment = new TrashFragment(); 
break; 

case R.id.nav_help: 

intent = new Intent(this, HelpActivity.class); 
break; 

case R.id.nav_feedback: 

intent = new Intent(this r FeedbackActivity.class) 
break; 
default: 

fragment = new InboxFragment(); 

} 


MB 

app/sre/main 
1 ■ 


java_ 

MB 

com. hfad. catchat 


MainActivity.java 


The Lo&t Continues 
oh the next page. 
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MainActivity.java (continued) 


v/ 

V 


navigation drawers 

Fragments/activities 

Header 

Options 

Drawer 


if (fragment != null) { 

FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); 
ft.replace(R.id.content_frame, fragment); 
ft.commit(); ■ 

} else { 

startActivity(intent); 

} 


Display the appir^iaie t«ra 9 r» e »t or activity, depend*. 

on whith option m the A \rawer the user selects. 


DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 
drawer.closeDrawer(GravityCompat.START); 
return true; 




> 


Close "the drawer when “the user selects one o( “the options. 


W\\cv\ -the user presses -the Badk 

@Override ^^utfcon, dose ihe drawer i-P its ofein. 

public void onBackPressed() { 

DrawerLayout drawer = (DrawerLayout) findViewByld(R.id.drawer_layout); 
if (drawer.isDrawerOpen(GravityCompat.START)) { 

drawer.closeDrawer(GravityCompat.START); 

} else { 

super.onBackPressed(); 


} 


Let’s see what happens when we run the code. 


□ 

CatChat 

4H 

app/sre/main 

L a 

java_ 

com.hfad.catchat 

MainActivity.java 
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test drive 



Test drive the app 

When we run the app, a drawer toggle icon is displayed in the toolbar. 
Clicking on this icon opens the navigation drawer. When we click on 
one of the first four options, the fragment for that option is displayed 
in MainActivity and the drawer closes; the option for that item is 
highlighted the next time we open the drawer. When we click on one 
of the last two options, the activity for that option is started. 


v/ 

V 


Fragments/activities 

Header 

Options 

Drawer 



CatChat 


Support 


Halp 


Giv us feedback 


CatChat 


When we didk on -the Half option, 

HelpA^tivity gets displayed and 

the drawer doses. 


^ M 12:03 


CatChat 


2 M 12:04 


spot@catcha®bmy 


AlainA^tivity indudes a drawer toggle. Clicking on it opens the drawer. 


We’ve created a fully operational 
navigation drawer. 


In da trash 


= CatChat 


nbox 


93 Mesagez 

f Draftz 

► Sent mesagez 

0 In da trash 

Support 

? Halp 

Giv us feedback 


lent items 

1/Vhen we didk on the Sent r»esagez. 
option, SentltemsFragment J^ts 
displayed and the drawer doses. 
The option is highlighted in the 
drawer the ne%t ti**e we open it- 


Mesagez 


Sent mesagez 


618 Chapter 14 











navigation drawers 



Your Android Toolbox 


You’ve got Chapter 14 under 
your belt and now you’ve 
added navigation drawers to 
your toolbox. 


You ta* download 
-the -full tode -for 
-the thapter -from 

https 1 //-tinyurltom/ 
Headf'irstAndroid- 



BULLET POINTS 


■ Use a navigation drawer if you want to provide the 
user with a large number of shortcuts, or group them 
into sections. 

■ Create a navigation drawer by adding a drawer 
layout to your activity’s layout. The drawer layout’s 
first element needs to be a view that defines the 
activity’s main content, usually a layout containing 

a Toolbar and FrameLayout. Its second 
element defines the contents of the drawer, usually a 

NavigationView. 

■ The NavigationView comes from the Design 
Support Library. It controls most of the drawer’s 
behavior. 


■ You add a header to your drawer by creating a layout 
for it, and adding the header’s resource ID to the 
navigation view’s headerLayout attribute. 

■ You add items to the drawer by creating a menu 
resource, and adding the menu’s resource ID to the 
navigation view’s menu attribute. 


Add items to the menu resource in the order in which 
you want them to appear in the drawer. 

If you want to highlight which item in the drawer the 
user selects, add the menu items to a group and set 
the group’s checkableBehavior attribute to 

"single". 

Use an ActionBarDrawerToggle to display 
a “burger” icon in the activity’s toolbar. This provides 
a visual sign that the activity has a navigation drawer. 
Clicking on it opens the drawer. 

Respond to the user clicking on items in the drawer 
by making your activity implement the 
NavigationView.OnNavigation 
ItemSelectedListener interface. 

Register the activity with the navigation 
view as a listener, then implement the 
onNavigationltemSelected () method. 

Close the navigation drawer using the 

DrawerLayout closeDrawer () method. 
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15 SQLite databases 





Fire Up the Database + 



When I said I 
wanted persistence, 
I was talking about 
the database. 


If you’re recording high scores or saving tweets, your app will 
need to store data. And on Android you usually keep your data safe inside a 
SQLite database. In this chapter, we’ll show you how to create a database, add tables 
to it, and prepopulate it with data, all with the help of the friendly SQLite helper. You’ll 
then see how you can cleanly roll out upgrades to your database structure, and how to 
downgrade it if you need to undo any changes. 


this is a new chapter 
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Starbuzz again 


Pack to Starbuzz 

Back in Chapter 7, we created an app for Starbuzz Coffee. 
The app allows the user to navigate through a series of 
screens so that she can see the drinks available at Starbuzz. 


i 

«A Q 2:27 

Q Starbuzz 



Sfarfewzr 

arc offtt _I 


i 

«A Q 2:28 

Q Starbuzz 



Drinks 
Food 
Stores 

The -top-level 
activity displays a 
list o-f options. 




Clicking on the 
Drinks option shows 
you a list o-f the 
available drinks. 




i 

Q Starbuzz 



.atte 

b couple of espresso shots with steamed milk 

When you t lidk on 
a drink, its details 
are displayed- 




The Starbuzz database gets its drink data from a Drink class 
containing a selection of drinks available at Starbuzz. While 
this made building the first version of the app easier, there’s a 
better way of storing and persisting data. 

Over the next two chapters, we’re going to change the 
Starbuzz app so that it gets its data from a SQLite database. 

In this chapter, we’ll see how to create the database, and in 
the next chapter, we’ll show you how to connect activities to it. 
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SQLite databases 


Android uses SQLite databases to persist data 


All apps need to store data, and the main way you do that in Androidville 
is with a SQLite database. Why SQLite? 


o 

o 

© 


It's lightweight. 

Most database systems need a special database server process 
in order to work. SQLite doesn’t; a SQLite database is just 
a file. When you’re not using the database, it doesn’t use up 
any processor time. That’s important on a mobile device, 
because we don’t want to drain the battery. 

It's optimized for a single user. 

Our app is the only thing that will talk to the database, so 
we shouldn’t have to identify ourselves with a username and 
password. 

It's stable and fast. 

SQLite databases are amazingly stable. They can handle 
database transactions, which means if you’re updating several 
pieces of data and mess up, SQLite can roll the data back. 
Also, the code that reads and writes the data is written in 
optimized G code. Not only is it fast, but it also reduces the 
amount of processor power it needs. 


Were going to go 
through the basics ol 
SQLite in this chapter. 

II you plan on doing a 
lot ol database heavy 
lilting in your apps, we 
suggest you do more 
background reading on 

SQLite and SQL. 


Where's the database stored? 


Android automatically creates a folder for each app where the app’s 
database can be stored. When we create a database for the Starbuzz app, 
it will be stored in the following folder on the device: 

^-tomhtadstavW- is the arc's 

/ data/data/com. hfad. starbuzz/databases 


identi-C 


ier. 


An app can store several databases in this folder. Each database 
consists of two files. 

The first file is the database file and has the same name 
as your database—for example, “starbuzz”. This is the main 
SQLite database file. All of your data is stored in this file. 

The second file is the journal file. It has the same name 
as your database, with a suffix of “-journal”—for example, 
“starbuzz-journal”. The journal file contains all of the changes 
made to your database. If there’s a problem, Android will use 
the journal to undo your latest changes. 



This is -the database 


■file- -> 



starbuzz 


This is the journal 



starbuzz-journal 
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your new best friends 


Android comes with SQlite classes 

Android uses a set of classes that allows you to manage a 
SQLite database. There are three types of object that do the 
bulk of this work: 



The SQlite Helper 

A SQLite helper enables 
you to create and manage 
databases. You create 
one by extending the 
SQLiteOpenHelper class. 



The SQlite database 

The SQLiteDatabase 
class gives you access to 
the database. It’s like a 
SQLConnection in JDBC. 


We’re going to use these objects to show you how to create a 
SQLite database your app can use to persist data by replacing 
the Drink class with a SQLite database. 


there.j are no 

Dumb Questions 


0: If there’s no username and 
password on the database, how is it 
kept secure? 


The directory where an app’s 
databases are stored is only readable by 
the app itself. The database is secured 
down at the operating system level. 


O: Can I write an Android app that 
talks to some other kind of external 
database, such as Oracle? 


There’s no reason why you can’t 
access other databases over a network 
connection, but be careful to conserve 
the resources used by Android. For 
example, you might use less battery power 
if you access your database via a web 
service. That way, if you’re not talking to 
the database, you’re not using up any 
resources. 


% Why doesn’t Android use JDBC to 
access SQLite databases? 


We know we’re going to be using a 
SQLite database, so using JDBC would be 
overkill. Those layers of database drivers 
that make JDBC so flexible would just drain 
the battery on an Android device. 


Q; Is the database directory inside 
the app’s directory? 


No. It’s kept in a separate directory 
from the app’s code. That way, the app can 
be overwritten with a newer version, but 
the data in the database will be kept safe. 
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SQLite databases 


The current Starbuzz app structure 

Here’s a reminder of the current structure of the Starbuzz app: 


o 

o 


TopLevelActivity displays a list of options: 
Drinks, Food, and Stores. 

When the user clicks on the Drinks option, it 
launches DrinkCategoryActivity. 

This activity displays a list of drinks that it gets from the 
Java Drink class. 


When the user clicks on a drink, its details get 
displayed in DrinkActivity. 

DrinkActivity gets details of the drink from the Java 
Drink class. 


<Layou-fc> I 
</Layou-t> I 

ac+ivi+y_+op_level.xml 



ac+ivi+y_drink_ 

ca+egory.xml 


The app duvrerrlly $ets its 
data W Ota the Dv-’mk dlass. 


o 

Drink.java 


Device 


TopLevelAc+ivity.java 


DrinkCategoryActivity.java 


<Layou-fc> 


</Layoui> 


activity_drink.xml 



DrinkActivity.java 


How does the app structure need to change if we’re to use a 
SQLite database? 



We’re going to update the 
Starbuzz app in this chapter, 
so open your original Starbuzz 
project in Android Studio. 
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change app 


Let's change the app to use a database 

We’ll use a SQLite helper to create a SQLite database we can use with 
our Starbuzz app. We’re going to replace our Drink Java class with a 
database, so we need our SQLite helper to do the following: 


© 


Create the database. 

Before we can do anything else, we need to get the SQLite helper to create 
version 1 (the first version) of our Starbuzz database. 


© 


Create the Drink table and populate it with drinks. 

Once we have a database, we can create a table in it. The table’s structure 
needs to reflect the attributes in the current Drink class, so it needs to be 
able to store the name, description, and image resource ID of each drink. 
We’ll then add three drinks to it. 


The app has the same structure as before except that we’re replacing 
the file Drink.java with a SQLite helper and a SQLite Starbuzz 
database. The SQLite helper will maintain the Starbuzz database, and 
provide access to it for the other activities. We’ll change the activities 
to use the database in the next chapter. 


Well store drinks in a 
database rather than 
the Drink dlass. 


<Layoui> I 
</Layou-t> I 

activity_top_level.xml 


activity_drink 

category.xml 




activity_drink.xml 


Device 


TopLevel Activity .java 


DrinkCategoryActivity.java 



DrinkActivity.java 


Let’s start by looking at the SQLite helper. 


In the next dhapter, well dhange 
the adtivities that addess the Drink 
dlass so that they use the database. 
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The SQLite helper manages your database 

The SQLiteOpenHelper class is there to help you create 
and maintain your SQLite databases. Think of it as a personal 
assistant who takes care of the general database housekeeping. 

Let’s look at some typical tasks that the SQLite helper can assist 
you with: 



Creating the 
database 


When you first install 
an app, the database file 
won’t exist. The SQLite 
helper will make sure the 
database file is created 
with the correct name 
and with the correct table 
structures installed. 


The SQLite helper 

i 


Keeping the database shipshape 


The structure of the database will probably 
change over time, and the SQLite helper can 
be relied upon to convert an old version of a 
database into a shiny, spiffy new version, with 
all the latest database structures it needs. 


SQLite databases 

Create database 
Create table 


(retting access to 
the database 

Our app shouldn’t 
need to know all of the 
details about where 
the database file is, so 
the SQLite helper can 
serve us with an easy- 
to-use database object 
whenever we need it. At 
all hours, day or night. 
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create helper 

Create the SQLite helper 



Create database 
Create table 


You create a SQLite helper by writing a class that extends the 
SQLiteOpenHelper class. When you do this, you must override 
the onCreate () and onUpgrade () methods. These methods are 
mandatory. 

The onCreate () method gets called when the database first gets 
created on the device. The method should include all the code needed 
to create the tables you need for your app. 

The onUpgrade () method gets called when the database needs to 
be upgraded. As an example, if you need to modify the structure of the 
database after it’s been released, this is the method to do it in. 


In our app, we’re going to use a SQLite helper called 
StarbuzzDatabaseHelper. Create this class in your Starbuzz 
project by switching to the Project view of Android Studio’s explorer, 
selecting the com. hf ad. starbuzz package in the app/src/main/ 
java folder, and navigating to File—>New...—Java Class. Name the 
class “StarbuzzDatabaseHelper”, make sure the package name is com. 
hf ad. starbuzz and then replace its contents with the code below: 

This is -the -full path ot the 
S^LiteOpenttelpev class. 

p 

import android. database. sqlite . SQLiteOpenHelper; £$Lite helpers must expend 
import android. content. Context; the £$LiteOpeir>H'elper dlass. 

import android.database.sqlite.SQLiteDatabase; 


package com.hfad.starbuzz; 


/ 


class StarbuzzDatabaseHelper extends SQLiteOpenHelper { 


{ 


□ 

Starbuzz 


app/src/main 

MU 


StarbuzzDatabaseHelper(Context context) 

} ^ write the Lode (or -the 

£ons-t\ru£”fco\r oy\ the next page- 

@Override 

public void onCreate(SQLiteDatabase db) { 

> The onCreateO a*d onUpgradeO methods are 

mandatory. We've le-P-t them empty -for now, and „ 

@Override ^ look at -them i n more detail throughout the chapter, 

public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) 

} 


java_ 

43 

com. hfad .starbuzz 
L @ 

StarbuzzDatabase 
11 Helper.java 


{ 


To get the SQLite helper to do something, we need to add code to its 
methods. The first thing to do is tell the SQLite helper what database 
it needs to create. 
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Specify the database 



SQLite databases 

Create database 
Create table 


There are two pieces of information the SQLite helper needs 
in order to create the database. 


First, we need to give the database a name. By giving the 
database a name, we make sure that the database remains on 
the device when it’s closed. If we don’t, the database will only 
be created in memory, so once the database is closed, it will << 
disappear. 


Greats databases that are only 
held in memory tan be useful when 
youVe iestmj youv- aff- 


The second piece of information we need to provide is the 
version of the database. The database version needs to be 
an integer value, starting at 1. The SQLite helper uses this 
version number to determine whether the database needs to 
be upgraded. 

You specify the database name and version by passing them 
to the constructor of the SQLiteOpenHelper superclass. 
We’re going to give our database a name of “starbuzz”, and 
as it’s the first version of the database, we’ll give it a version 
number of 1. Here’s the code we need (update your version of 
StarbuzzDatabaseHelper.java to match the code below): 



Name: "starbuzz" 
Version: 1 


class StarbuzzDatabaseHelper extends SQLiteOpenHelper { 


private static final String DB_NAME = "starbuzz”; // the name of our database 
private static final int DB_VERSION =1; // the version of the database 


} 


StarbuzzDatabaseHelper(Context context) { 

super(context, DB_NAME, null, DB_VERSION); 


This parameter is an advanced -feature relating to 
Cursors. We'll Cover Cursors in the next Chapter. 


I/Ve're calling the Constructor of the 
*7- SQLiteOpenHelper superclass, and passing 
it the database name and version. 

□ 

Starbuzz 


The constructor specifies details of the database, but the 
database doesn’t get created at that point. The SQLite helper 
waits until the app needs to access the database, and then 
creates the database. 


MB 

app/src/main 

java_ 

MB 


We’ve now done everything we need to tell the SQLite helper 
what database to create. The next step is to tell it what tables 
to create. 


com.hfad.starbuzz 



StarbuzzDatabase 

Helper.java 
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tables 


Create database 
Create table 


Inside a SQlite database 

The data inside a SQLite database is stored in tables. A table contains 
several rows, and each row is split into columns. A column contains a 
single piece of data, like a number or a piece of text. 

You need to create a table for each distinct piece of data that you want to 
record. In the Starbuzz app, for example, we’ll need to create a table for 
the drink data. It will look something like this: 


id 

NAME 

DESCRIPTION 

IMAGE RESOURCE ID 

1 

“Latte” 

"Espresso and steamed milk" 

54543543 

2 

“Cappuccino” 

"Espresso, hot milk and 

654334453 



steamed-milk foam" 


3 

“Filter” 

"Our best drip coffee" 

44324234 


The doluwms m the table ave 

jd, NAME, DESCRIPTION, and 
IMM£_RK0URC£_JD- The 
Dvink dlass dontained similarly 
named attributes. 

1 / 


Some columns can be specified as primary keys. A primary key 
uniquely identifies a single row. If you say that a column is a primary key, 
then the database won’t allow you to store rows with duplicate keys. 

We recommend that your tables have a single column called _id to hold 
the primary key that contains integer values. This is because Android 
code is hardwired to expect a numeric _id column, so not having one can 
cause you problems later on. 

Storage classes and data types 

Each column in a table is designed to store a particular type of data. For 
example, in our DRINK table, the DESCRIPTION column will only 
ever store text data. Here are the main data types you can use in SQLite, 
and what they can store: 


INTEGER 

TEXT 

REAL 

NUMERIC 

BLOB 


Any integer type 
Any character type 
Any floating-point number 
Booleans, dates, and date-times 
Binary Large Object 


Unlike most database systems, you don’t need to specify the column size in 
SQLite. Under the hood, the data type is translated into a much broader 
storage class. This means you can say very generally what kind of data you’re 
going to store, but you’re not forced to be specific about the size of data. 


It’s an Android 
convention to call 
your primary key 
columns _id. Android 
code expects there to 
he an _id column on 
your data. Ignoring 
this convention will 
make it harder to get 
the data out ol your 
database and into 
your user interlace. 
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SQLite databases 


You create tables using Structured Query Language (SQL) 

Every application that talks to SQLite needs to use a standard database 
language called Structured Query Language (SQL). SQL is used by almost 
every type of database. If you want to create the DRINK table, you will 
need to do it in SQL. 

This is the SQL command to create the table: The __id dolumn is “the pvir*av-y key. 

K 

CREATE TABLE DRINK (_id INTEGER PRIMARY KEY AUTOINCREMENT, 

The -table *a»>e —^ name text , 

These a\re -table eolumns. < description text, 

IMAGE_RESOURCE_ID INTEGER) 

The CREATE TABLE command says what columns you want in the table, 
and what the data type is of each column. The _id column is the primary 
key of the table, and the special keyword AUTO INCREMENT means that 
when we store a new row in the table, SQLite will automatically generate a 
unique integer for it. 

The owCreateO method is called when the database is created 

The SQLite helper is in charge of creating the SQLite database. An empty 
database is created on the device the first time it needs to be used, and then 
the SQLite helper’s onCreate () method is called. The onCreate () 
method has one parameter, a SQLiteDatabase object that represents 
the database that’s been created. 

You can use the SQLiteDatabase execSQL () method to execute 
SQL on the database. This method has one parameter, the SQL you want 
to execute. 

execSQL (String sql) ; ^ *tbc £$L m *tbe S-tvmJ oy \ “the da^tsbase 


Tke 

SQLiteDatabase 
class gives you 
access to tke 
database. 


We’ll use the onCreate () method to create the DRINK table. Here’s the 
code (we’ll add the code in a few pages): 

public void onCreate(SQLiteDatabase db){ 

db.execSQL("CREATE TABLE DRINK (" 

+ "_id INTEGER PRIMARY KEY AUTOINCREMENT, 
+ "NAME TEXT, " 

+ "DESCRIPTION TEXT, " 

+ "IMAGE_RESOURCE_ID INTEGER);"); 


n 


□ 

Starbuzz 

H3 

app/src/main 

H3 


java_ 

MB 


com.hfad.starbuzz 



This gives us an empty DRINK table. We want to prepopulate it with drink 
data, so let’s look at how you do that. 


StarbuzzDatabase 

Helper.java 
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insertQ 


Insert data using the insert!) method 

To insert data into a table in a SQLite database, you start by specifying 
what values you want to insert into the table. To do this, you first create 

a ContentValues object: 

ContentValues drinkValues = new ContentValues (); 



Create database 
Create table 


A ContentValues object describes a set of data. You usually create a 
new ContentValues object for each row of data you want to create. 


You add data to the ContentValues object using its put () method. 
This method adds name/value pairs of data: NAME is the column you 
want to add data to, and value is the data: 


ContentValues.put("NAME", 


"value"); 


NAME is -bKc dolunrm you wan*t to add data 
to. value is the value you want it to have. 


As an example, here’s how you’d use the put () method to add 
the name, description, and image resource ID of a latte to a 
ContentValues object called drinkValues: 


This is a drinkValues.put ("NAME", "Latte") ; ^ Va ' we m the NAME tolunm. 

single (row. drinkValues .put ("DESCRIPTION" , "Espresso and steamed milk") ; Espresso and 

a! Jail / steamed milk in 

o+ data- drinkValues . put (" IMAGE_RESOURCE_ID ", R. drawable. latte) 

^ /K 


Once you’ve added a row of data to the ContentValues object, you 
insert it into the table using the SQLiteDatabase insert () method. 
This method inserts data into a table, and returns the ID of the record 
once it’s been inserted. If the method is unable to insert the record, it 
returns a value of -1. As an example, here’s how you’d insert the data 
from drinkValues into the DRINK table: 


need a 
separate dall 

t o -the putO 
ethod -for 
eadh value you 
want to enter. 


the DESCRIPTION 

dolumn- 


db.insert("DRINK", null. 


IrinkValues) 


■ This inserts a single row into the table- 


The middle parameter is usually set to null, as in the above code. It’s 
there in case the ContentValues object is empty, and you want to 
insert an empty row into your table. It’s unlikely you’d want to do this, 
but if you did you’d replace the null value with the name of one of the 
columns in your table. 


Running the lines of code above will insert a Latte row into the DRINK 
table: 


id 

NAME 

DESCRIPTION 

IMAGE RESOURCE ID 

1 

“Latte” 

"Espresso and steamed milk" 

54543543 


The insert () methods inserts one row of data at a time. But what if 
you want to insert multiple records? 


A shiny new 
redord $ets 
inserted into 
the table. 
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Insert multiple records 



SQLite databases 

Create database 
Create table 


To insert multiple rows into a table, you need to make repeat calls 
to the insert () method. Each call to the method inserts a 
separate row. 


To insert multiple rows, you usually create a new method that 
inserts a single row of data, and call it each time you want to add 
a new row. As an example, here’s an insertDrink () method 

we wrote to insert drinks into the DRINK table: T\\\s is da*tabasc we 

wan-t -to add redords -to 

private static void insertDrink(SQLiteDatabase db. 


String name. 

String description, 
int resourceld) { 

ContentValues drinkValues = new ContentValues() 
drinkValues.put("NAME", name); 
drinkValues.put("DESCRIPTION", description); 
drinkValues.put("IMAGE_RESOURCE_ID", resourceld) 
db. insert ("DRINK", null, drinkValues) Then da ^. 


WeVe passing -the data to the 
method as parameters. 


Construdt a ContentValues 
objedt wth the data. 


To add three drinks to the DRINK table, each one a separate row 
of data, you’d call the method three times: 


insertDrink(db, 
insertDrink(db, 

insertDrink(db. 


"Latte", "Espresso and steamed milk", R.drawable.latte); 
"Cappuccino", "Espresso, hot milk and steamed-milk foam", 
R.drawable.cappuccino); 

"Filter", "Our best drip coffee", R.drawable.filter); 


That’s everything you need to know to insert data into 
tables. On the next page we’ll show you the revised code for 
StarbuzzDatabaseHelperjava. 
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helper code 




The StarbuzzPatabaseHelper code 

Here’s the complete code for StarbuzzDatabaseHelper.java (update your 
code to reflect our changes): 

You need to add this 

package com.hfad. starbuzz; statement 

import android.content.ContentValues; 

import android.content.Context; 

import android.database.sqlite.SQLiteDatabase; 

import android.database.sqlite.SQLiteOpenHelper; 

class StarbuzzDatabaseHelper extends SQLiteOpenHelper{ 


Starbuzz 


-►M 

□ 

IUZ2 

HO 

app/src/main 

lo 

43 


Create database 
Create table 


java 


com. hfad. starbuzz 

U 


StarbuzzDatabase 

Helper.java 


private static final String DB_NAME 
private static final int DB_VERSION 


"starbuzz"; // the name of our database 
1; // the version of the database 

^-— Say what -the database name and 

StarbuzzDatabaseHelper (Context context) { version is. Its the -first version o-f the 

super (context, DB_NAME, null, DB_VERSION) ; database; so tbe version should be I- 

onCv-eateO ^cts ealled when the database -first <^ets direated; 

@Override usm 3 ^ to Create tbe table and insert data* 

public void onCreate(SQLiteDatabase db){ 

db.execSQL("CREATE TABLE DRINK (_id INTEGER PRIMARY KEY AUTOINCREMENT, " 

+ "NAME TEXT, " the DR IN* table. 

+ "DESCRIPTION TEXT, " 

+ "IMAGE_RESOURCE_ID INTEGER);"); 

Insert eadh f^insertDrink (db, "Latte", "Espresso and steamed milk" , R. drawable . latte) ; 
drink in a J insertDrink (db, "Cappuccino", "Espresso, hot milk and steamed-milk foam", 

separate v-ovd R • drawable • cappuccino) ; 

'—insertDrink(db, "Filter", "Our best drip coffee", R. drawable . filter) ; 


} 


@Override 


onUpyadeO ^ets dal led when the database 
- needs to be upgraded- We II look at this ne*t- 


public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { 

} 


private static void insertDrink(SQLiteDatabase db. String name, 

String description, int resourceld) { 
ContentValues drinkValues = new ContentValues(); 
drinkValues.put("NAME", name); 
drinkValues.put("DESCRIPTION", description); 
drinkValues.put("IMAGE_RESOURCE_ID", resourceld); 
db.insert("DRINK", null, drinkValues); 

} 

} 


* 


We need to insert several 
drinks, so we treated a 
separate method to do this. 
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What the Sftlite helper code does 


v/ 

-Hv 


SQLite databases 

Create database 
Create table 


O 


0 


The user installs the app and launches it. 

When the app needs to access the database, the SQLite helper checks to see if 
the database already exists. _ 

@ 0 O You need a database, ^ 
f sir? Let me see if it's A 
already there for you. J 

1 

SQLite helper 

If the database doesn't exist, it gets created. 

It’s given the name and version number specified in the SQLite helper. 


o 



Name: "starbuzz" 
Version: 1 


When the database is created, the onCreate() method in the 
SQLite helper is called. 

It adds a DRINK table to the database, and populates it with records. 



SQLite helper 


Name: "starbuzz" 
Version: 1 
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change database 


What if you need to make changes to the 
database? 

So far, you’ve seen how to create a SQLite database that your app will 
be able to use to persist data. But what if you need to make changes to 
the database at some future stage? 


As an example, suppose lots of users have already installed your 
Starbuzz app on their devices, and you want to a add a new 
FAVORITE column to the DRINK table. How would you distribute 
this change to new and existing users? 



Well, we could change the CREATE TABLE 
statement in the onCreate() method, but 
that doesn't feel entirely right to me. I 
mean, what if a device already has the old 
version of the database installed? 


When you need to change an app’s database, 
there are two key scenarios you have to deal with. 

The first scenario is that the user has never installed your app before, 
and doesn’t have the database installed on their device. In this case, 
the SQLite helper creates the database the first time the database 
needs to be accessed, and runs its onCreate () method. 

The second scenario is where the user installs a new version of your 
app that includes a different version of the database. If the SQLite 
helper spots that the database that’s installed is out of date, it will call 
either the onUpgrade () or onDowngrade () method. 

So how can the SQLite helper tell if the database is out of date? 
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SQLite databases 

Upgrade database 


SQLite databases have a version number 


The SQLite helper can tell whether the SQLite database needs updating 
by looking at its version number. You specify the version of the database 
in the SQLite helper by passing it to the SQLiteOpenHelper 
superclass in its constructor. 

Earlier on, we specified the version number of the database like this: 


private static final String DB_NAME = "starbuzz"; 

private static final int DB_VERSION = 1; 

StarbuzzDatabaseHelper(Context context) { 

super(context, DB_NAME , null, DB_VERSION); 

} 


When the database gets created, its version number gets set to the version 
number in the SQLite helper, and the SQLite helper onCreate () 
method gets called. 

When you want to update the database, you change the version number 
in the SQLite helper code. To upgrade the database, specify a number 
that’s larger than you had before, and to downgrade your database, specify 
a number that’s lower: 



Geejc BifS 1 


SQLite databases support 
a version number that's 
used by the SQLite helper, 
and an internal schema 
version. Whenever a 
change is made to the 
database schema, such 
as the table structure, 
the database increments 
the schema version by 1. 
You have no control over 
this value, it's just used 
internally by SQLite. 


private static final int DB_VERSION = 2, 


^ ^ weVe '^easing the versio* » u »>ber, 
so the database will get upgraded- 


Most of the time, you’ll want to upgrade the database, so specify a 
number that’s larger. You usually only downgrade your database when 
you want to undo changes you made in a previous upgrade. 

When the user installs the latest version of the app on their device, the 
first time the app needs to use the database, the SQLite helper checks its 
version number against that of the database on the device. 

If the version number in the SQLite helper code is higher than that of 
the database, it calls the SQLite helper onUpgrade () method. If the 
version number in the SQLite helper code is lower than that of the 
database, it calls the onDowngrade () method instead. 

Once it’s called either of these methods, it changes the version number of 
the database to match the version number in the SQLite helper. 
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what happens 


-HD 


Upgrade database 


What happens when you change the version number 


Let’s look at what happens when you release a new version of the 
app where you’ve changed the SQLite helper version number from 1 
to 2. We’ll consider two scenarios: where a first-time user installs the 
app, and when an existing user installs it. 


Scenario 1: A first-time user installs the app 


© 


The first time the user runs the app, the database doesn't exist, so 
the SQLite helper creates it. 

The SQLite helper gives the database the name and version number specified in the 
SQLite helper code. 



Name: "s+arbuzz" 

Version: 2 

The £$Lrle helper <yves -the 
database a version nurwbev 
o-f 2- i-f this is the version 
number spedi-Pied in the 
SQLite helper dode- 


© 


When the database is created, the onCreate() method in the SQLite 
helper is called. 

The onCreate () method includes code to populate the database. 


onCreate() 



SQLite helper 


Name: "s+arbuzz" 
Version: 2 


That’s what happens when a first-time user installs the app. What 
about when an existing user installs the new version? 
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Scenario Z: an existing user installs the new version 




SQLite databases 

Upgrade database 


© 


When the user runs the new version of the app, the database helper 
checks whether the database exists. 

If the database already exists, the SQLite helper doesn’t recreate it. 



SQLite helper 


DRINK 



SQLite database 


Name: "starbuzz" 
Version: 1 


O The SQLite helper checks the version number of the existing database 
against the version number in the SQLite helper code. 

If the SQLite helper version number is higher than the database version, it calls the 
onUpgrade () method. If the SQLite helper version number is lower than the database 
version, it calls the onDowngrade () method. It then changes the database version 
number to reflect the version number in the SQLite helper code. 



Name: "starbuzz" 

Version^ 2 

T 

The £$Lite helper runs the 
onWpyadeO method (i*f the 
new version number is higher) 
and updates the database 
version number. 


Now that you’ve seen under what circumstances the 
onUpgrade () and onDowngrade () methods get called, 
let’s find out more about how you use them. 
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onilpgradeQ 


Upgrade your database with onUpgradeO 


■*U 


Upgrade database 


The onUpgrade () method has three parameters—the 
SQLite database, the user’s version number of the database, 
and the new version of the database that’s passed to the 

SQLiteOpenHelper superclass: The user's version o-P -the 

database, whi£h is out o-P date 

@Override \ r 


The new version 
described in the 
Shiite helper Code 


public void onUpgrade(SQLiteDatabase db, int 
//Your code goes here 

} 

The version numbers are important, as you can use them to say 
what database changes should be made depending on which 
version of the database the user already has. As an example, 
suppose you needed to run code if the user has version 1 of the 
database, and the SQLite helper version number is higher. Your 
code would look like this: 


oldVersion, int newVersion) { 

'T 

Remember, to upgrade the database, 
the new version must be higher than 
the user s ex-istin^ version- 


QOverride 

public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { 

if (oldVersion == 1) { 

//Code to run if the database version is 1 V-This todc will only run i-P ihe 
} user has version I o-f -the 

} database, and the SQLite 

helper version number is hiaher. 

You can also use the version numbers to apply successive updates 
like this: 


QOverride 

public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { 

if (oldVersion == 1) { 

//Code to run if the database version is 1 ^ —-This Co dt will only run i-P the 
} users database is at version I- 

if (oldVersion < 3) { 

//Code to run if the database version is 1 or 2 TVis tode will run it the user's 

database is at version I or Z- 

} 

Using this approach means that you can make sure that the user 
gets all the database changes applied that they need, irrespective 
of which version they have installed. 

The onDowngrade () method works in a similar way to the 
onUpgrade () method. Let’s take a look on the next page. 
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SQLite databases 

Upgrade database 


downgrade your database with onPowngradeO 


The onDowngrade () method isn’t used as often as the 
onUpgrade () method, as it’s used to revert your database to 
a previous version. This can be useful if you release a version of 
your app that includes database changes, but you then discover 
that there are bugs. The onDowngrade () method allows you 
to undo the changes and set the database back to its previous 
version. 

Just like the onUpgrade () method, the onDowngrade () 
method has three parameters—the SQLite database you 
want to downgrade, the version number of the database 
itself, and the new version of the database that’s passed to the 
SQLiteOpenHelper superclass: 


@Override 


public void onDowngrade(SQLiteDatabase db, 
//Your code goes here 


int oldVersion, 


int newVersion) 

f 


{ 


j To downgrade the database, the 

new version must be lower than 

Just as with the onUpgrade () method, you can use the version uscv " s existing version, 

numbers to revert changes specific to a particular version. As an 
example, if you needed to make changes to the database when 
the user’s database version number is 3, you’d use code like 
following: 


@Override 


public void onDowngrade(SQLiteDatabase db, int oldVersion, int newVersion) { 


} 


if 


} 


(oldVersion == 3) { 

//Code to run if the database version is 


This tode will run i-f the user 
has version 3 of the database, 
but you want to downgrade it 
to a lower version. 


Now that you know how to upgrade and downgrade a database, 
let’s walk through the more common scenario: upgrading. 
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upgrade database 


Upgrade database 


Let's upgrade the database 


■*U 


Suppose we need to upgrade our database to add a new column to the 
DRINK table. As we want all new and existing users to get this change, 
we need to make sure that it’s included in both the onCreate () and 
onUpgrade () methods. The onCreate () method will make sure that all 
new users get the new column, and the onUpgrade () method will make 
sure that all existing users get it too. 

Rather than put similar code in both the onCreate () and onUpgrade () 
methods, we’re going to create a separate updateMyDatabase () 
method, called by both the onCreate () and onUpgrade () methods. 
We’ll move the code that’s currently in the onCreate () method to this 
new updateMyDatabase () method, and we’ll add extra code to create 
the extra column. Using this approach means that you can put all of your 
database code in one place, and more easily keep track of what changes 
you’ve made each time you’ve updated the database. 

Here’s the full code for StarbuzzDatabaseHelperjava (update your code to reflect 
our changes): 


package com.hfad.starbuzz; 


import android.content.ContentValues; 
import android.content.Context; 
import android.database.sqlite.SQLiteDatabase; 
import android.database.sqlite.SQLiteOpenHelper; 


class StarbuzzDatabaseHelper extends SQLiteOpenHelper{ 


□ 

Starbuzz 

L Q 

app/src/main 

LfiB 

java 

com.hfad.starbuzz 

LQ 


StarbuzzDatabase 

Helper.java 


private static final String DB_NAME = "starbuzz"; // the name of our database 


private static final int DB_VERSION = vb2; // the 



StarbuzzDatabaseHelper(Context context){ 

super(context, DB_NAME , null, DB_VERSION); 

} 


version of the database 

Changing “the version number to a larger 
integer means the £<$Lite helper will know 
•that you want to upgrade the database- 


QOverride 


public void onCreate(SQLiteDatabase db){ 

updateMyDatabase(db, 0, DB_VERSION); <— 

} 


Replace -the existing 

onCreateO tode with this 
tall to updateMyDatabaseO. 


The tode 
tontinues 
on the 
next page 
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SQLite databases 

Upgrade database 


The SQLite helper code (continued) 

@Override 

public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { 

updateMyDatabase(db, oldVersion, newVersion) ; ^— Call the ufdateMyDatabaseO 
} method -Prom onUpjradeO, 

passing along -the parameters. 

private static void insertDrink(SQLiteDatabase db. String name. 

String description, int resourceld) { 
ContentValues drinkValues = new ContentValues(); 
drinkValues.put("NAME", name); 
drinkValues.put("DESCRIPTION", description); 
drinkValues.put("IMAGE_RE SOURCE_ID", resourceld); 
db.insert("DRINK", null, drinkValues); 

} 


private void updateMyDatabase(SQLiteDatabase db, int oldVersion, int newVersion) { 
if (oldVersion < 1) { 

db.execSQL("CREATE TABLE DRINK (_id INTEGER PRIMARY KEY AUTOINCREMENT, " 

+ "NAME TEXT, " 

+ "DESCRIPTION TEXT, " 

+ "IMAGE_RESOURCE_ID INTEGER);"); 

insertDrink(db, "Latte", "Espresso and steamed milk", R. drawable . latte) ; 
insertDrink(db, "Cappuccino", "Espresso, hot milk and steamed-milk foam", 

R.drawable.cappuccino); 

insertDrink(db, "Filter", "Our best drip coffee", R.drawable.filter); 


This is -the 
dode we 
previously 
had in our 
ohCrea-teO 
method- 


if (oldVersion < 2) { 

//Code to add the extra column 

^ "^This dode will run i*f the user already 

has version I o( *the database- We 
need to write this dode next- 


The next thing we need to do is write the code to upgrade the 
database. Before we do that, try the exercise on the next page. 


□ 

Starbuzz 

HU 

app/sre/main 

Lfia 

java 


m3 

com. hfad. starbuzz 

L B 

StarbuzzDatabase 

Helper.java 
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exercise 



BE fk yQIjfe Helper 

On the right, you’ll See some SQhite 
helper code. Your job is to play like 
you’re the SQjite helper and 
say which code will run 
for each of the users 
below. We’ve labeled 
the code we want you to 
consider. We’ve done the 
first one to start you off. 


User 1 runs the app for the first time. 

Code segment A- The user doesn't have the 
database, so the onCreateO method runs. 


User 2 has database version 1. 


User 3 has database version 2. 


class MyHelper extends SQLiteOpenHelper{ 

StarbuzzDatabaseHelper(Context context){ 
super (context, "fred", null, 4); 

} 


QOverride 

public void onCreate(SQLiteDatabase db){ 
^^//Run code A 


QOverride 

public void onUpgrade(SQLiteDatabase db, 

int oldVersion, 
int newVersion){ 


if (oldVersion 
//Run code 


© 


< 2 ) 
B 


{ 


} 


if (oldVersion 
0 //Run code 


== 3) { 

C 


o 


} 

//Run 


code 


D 


User 4 has database version 3. 


User 5 has database version 4. 


User 6 has database version 5. 


QOverride 

public void onDowngrade(SQLiteDatabase db, 

int oldVersion, 
int newVersion){ 


o 


(oldVersion == 
//Run code E 


3) { 


} 

if (oldVersion < 6) { 

O //Run code F 

} 

} 
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Answers on page 654. 



Upgrade an existing database 


■*a 


SQLite databases 

Upgrade database 


When you need to upgrade your database, there are two types of 
actions you might want to perform: 


© 


Change the database records. 

Earlier in the chapter, you saw how to insert records in your database using 
the SQLiteDatabase insert () method. You may want to add more 
records when you upgrade the database, or update or delete the records 
that are already there. 


o 


Change the database structure. 

You’ve already seen how you can create tables in the database. You may 
also want to add columns to existing tables, rename tables, or remove tables 
completely. 


We’ll start by looking at how you change database records. 


How to update records 

You update records in a table in a similar way to how you insert 
them. 

You start by creating a new Con tent Values object that 
specifies what you want to update values to. As an example, 
suppose you wanted to update the Latte data in the DRINK table 
so that the value of the DESCRIPTION field is “Tasty”: 


id 

NAME 

DESCRIPTION 

IMAGE RESOURCE ID 

1 

“Latte” 

"Tasty" 

54543543 


To do this, you’d create a new ContentValues object that 
describes the data that needs to be updated: 


ContentValues drinkValues = new ContentValues(); 


drinkValues.put("DESCRIPTION ", "Tasty") 


Notice that when you’re updating records, you only need to 
specify the data you want to change in the ContentValues 
object, not the entire row of data. 


We wa*t -to the value o-P the 

Column to Tasty, so we aive the 

»ame DESCRIPTION" a value of “Tasty". 


Once you’ve added the data you want to change to the 
ContentValues object, you use the SQLiteDatabase 
update () method to update the data. We’ll look at this on the 
next page. 
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Upgrade database 


Update records with the updated method 

The update () method lets you update records in the database, 
and returns the number of records it’s updated. To use the 
update () method, you specify the table you want to update 
records in, the Con tent Values object that contains the values 
you want to update, and the conditions for updating them. 

As an example, here’s how you’d change the value of the 
DESCRIPTION column to “Tasty” where the name of the drink 
is “Latte”: 

ContentValues drinkValues = new ContentValues(); 
drinkValues.put("DESCRIPTION", "Tasty"); 

db.update ("DRINK" , ^- This is -the wa»e ot the table whose vedovds you want to update. 

The conditions V drinkValues ' ^This is the ContentValues object that Contains the new values, 
updating the data, C " NAME = 

in this case wheve 5 new String [] { "Latte" }) ; —’The value "Latte” is substituted -fov the 

NAME - “Latte". ^ ? in the “NAME - ?” statement above- 

The first parameter of the update () method is the name of the 
table you want to update (in this case, the DRINK table). 

The second parameter is the ContentValues object that 
describes the values you want to update. In the example 
above, we’ve added "DESCRIPTION" and "Tasty" to 
the ContentValues object, so it updates the value of the 
DESCRIPTION column to “Tasty”. 

The last two parameters specify which records you want to update 
by describing conditions for the update. Together, they form the 
WHERE clause of a SQL statement. 

The third parameter specifies the name of the column in the 
condition. In the above example, we want to update records where 
the value of the NAME column is “Latte”, so we use "NAME = 

? "; it means that we want the value in the NAME column to be 
equal to some value. The ? symbol is a placeholder for this value. 

The last parameter is an array of Strings that says what the value 
of the condition should be. In our particular case we want to 
update records where the value of the NAME column is “Latte”, 
so we use: 

new String[] {"Latte"}); 

We’ll look at more complex conditions on the next page. 


. 

W I If you set the 
last two 
parameters of 
Watch it! the update() 

method to null, 
ALL records in the table 
will be updated. 

As an example, the code: 

db.update("DRINK", 

drinkValues, 
null, null); 

will update all records in the 
DRINK table. 


646 Chapter 15 








Apply conditions to multiple columns 


■*a 


SQLite databases 

Upgrade database 


You can also specify conditions that apply to multiple columns. As an 
example, here’s how you’d update all records where the name of the 
drink is “Latte”, or the drink description is “Our best drip coffee”: 


db.update("DRINK", 

drinkValues, 

"NAME = ? OR DESCRIPTION = ?" 


This means: Where NAME - "La-tie" ov 
VBSCRIPTIOM - "Our best drip tMee". 


new String[] {"Latte", "Our best drip coffee"}); 


If you want to apply conditions that cover multiple columns, you 
specify the column names in the update () method’s third 
parameter. As before, you add a placeholder ? for each value you 
want to add as part of each condition. You then specify the condition 
values in the update () method’s fourth parameter. 




Bach ? placeholder is replaced 
with a value -from "this array- The 
number of values in -the array 
rwus"t match "the number of ? s. 


The condition values must be Strings, even if the column you’re 
applying the condition to contains some other type of data. As an 
example, here’s how you’d update DRINK records where the _id 
(numeric) is 1: 

db.update("DRINK", 

drinkValues, 

"_id = ?", 

new String[] {Integer.toString(1)}); 


Convert “the in't I 
"to a String value* 


delete records with the deleteO method 

You delete records using the SQLite Database delete () method. It 
works in a similar way to the update () method you’ve just seen. You specify 
the table you want to delete records from, and conditions for deleting the data. 
As an example, here’s how you’d delete all records from the DRINK table 
where the name of the drink is “Latte”: 


db.delete("DRINK", 

"NAME = ?", 
new String[] 


See how similar "this is "to "the updateO method- 


{"Latte"}); 


The entire row is deleted- 



The first parameter is the name of the table you want to delete records from 
(in this case, DRINK). The second and third arguments allow you to describe 
conditions to specify exactly which records you wish to delete (in this case, 
where NAME = “Latte”). 
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exercise 






Here's the onCreate () method of a SQLiteOpenHelper 

class. Your job is to say what values have been inserted into the 
NAME and DESCRIPTION columns of the DRINKtable when the 
onCreate () method has finished running. 


QOverride 

public void onCreate(SQLiteDatabase db) { 

ContentValues espresso = new ContentValues(); 
espresso.put("NAME", "Espresso"); 

ContentValues americano = new ContentValues(); 
americano.put("NAME", "Americano"); 
ContentValues latte = new ContentValues(); 
latte.put("NAME", "Latte"); 

ContentValues filter = new ContentValues(); 
filter.put("DESCRIPTION", "Filter"); 
ContentValues mochachino = new ContentValues(); 
mochachino.put("NAME", "Mochachino"); 


} 


db.execSQL("CREATE TABLE DRINK (" 

+ "_id INTEGER PRIMARY KEY AUTOINCREMENT, " 
+ "NAME TEXT, " 

+ "DESCRIPTION TEXT);"); 
db.insert("DRINK", null, espresso); 
db.insert("DRINK", null, americano); 


db.delete("DRINK", 
db.insert("DRINK", 
db.update("DRINK", 
db.insert("DRINK", 


null, null); 
null, latte); 
mochachino, "NAME 
null, filter); 


?", new String[] {"Espresso"}); 


*eed to 
enter the 
value o( the 
_ id dolumh. 


id 

NAME 

DESCRIPTION 




















Answers on page 655. 
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Change the database structure 

In addition to creating, updating, or deleting database records, you 
may want to make changes to the database structure. As an example, 
in our particular case we want to add a new FAVORITE column to 
the DRINK table. 




SQLite databases 

Upgrade database 


Add new columns to tables using SQL 

Earlier in the chapter, you saw how you could create tables using the 
SQL CREATE TABLE command like this: 

The __id dolumn is *the pvimavy key- 

K 

CREATE TABLE DRINK (_id INTEGER PRIMARY KEY AUTOINCREMENT, 
NAME TEXT, 

The table name f ^ 

(/^DESCRIPTION TEXT, 

The table dolumns >^ IMAGE ^ RES0URCE ^ ID INTEGER) 

You can also use SQL to change an existing table using the ALTER 
TABLE command. As an example, here’s what the command looks 
like to add a column to a table: 

The table name 

ALTER TABLE DRINK ^ 

ADD COLUMN FAVORITE NUMERIC The dolumn you want to add 

In the example above, we’re adding a column to the DRINK table 
called FAVORITE that holds numeric values. 


Renaming tables 

You can also use the ALTER TABLE command to rename a table. 
As an example, here’s how you’d rename the DRINK table to FOO: 

_ _ ___ _____ ______ 4 ^-The duv-\rent table name 

RENAME TO FOO <^_>Tbe new name of the table 

On the next page, we’ll show you how to remove a table from the 
database. 
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altering tables 


Upgrade database 


Pelete tables by dropping them 

If you want to delete a table from the database, you use the DROP 
TABLE command. As an example, here’s how you’d delete the 
DRINK table: 

DROP TABLE DRINK The rt3me *the -table you warrt “to remove 

This command is useful if you have a table in your database schema 
that you know you don’t need anymore, and want to remove it in 
order to save space. Make sure you only use the DROP TABLE 
command if you’re absolutely sure you want to get rid of the table and 
all of its data. 

Execute the SQL using execSQLO 

As you saw earlier in the chapter, you execute SQL commands using 
the SQLiteDatabase execSQL () method: 

SQLiteDatabase.execSQL(String sql); 


You use the execSQL () method any time you need to execute SQL 
on the database. As an example, here’s how you’d execute SQL to 
add a new FAVORITE column to the DRINK table: 

db.execSQL("ALTER TABLE DRINK ADD COLUMN FAVORITE NUMERIC;"); 

Now that you’ve seen the sorts of actions you might want to 
perform when upgrading your database, let’s apply this to 
StarbuzzDatabaseHelperjava. 
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SQLite databases 

Upgrade database 


The full SQLite helper code 


■*U 


Here’s the full code for StarbuzzDatabaseHelperjava that will add a 
new FAVORITE column to the DRINK table. Update your code 
to match ours (the changes are in bold): 

package com.hfad.starbuzz; 

import android.content.ContentValues; 
import android.content.Context; 
import android.database.sqlite.SQLiteDatabase; 
import android.database.sqlite.SQLiteOpenHelper; 


□ 

Starbuzz 

4H 

app/src/main 

43 


java_ 

■ 


com. hfad. starbuzz 



class StarbuzzDatabaseHelper extends SQLiteOpenHelper{ 


StarbuzzDatabase 

Helper.java 


private static final String DB_NAME = "starbuzz"; // the name of our database 


private static final int DB VERSION =2; // the version of the database 



StarbuzzDatabaseHelper(Context context){ 

super(context, DB_NAME, null, DB_VERSION); 

} 


Chafing “the version number to 
a larger integer enables the 
£$Lite helper to spot that you 
want to upgrade the database. 


QOverride 


public void onCreate(SQLiteDatabase db){ 

updateMyDatabase (db, 0, DB VERSION); j i . . > . 

^ The code to create a*y database -tables is 

} the update/WyDatabaseO method- 


@Override 

public void onUpgrade(SQLiteDatabase 
updateMyDatabase(db, oldVersion, 




The tode to upgrade the database is 
m our updateMyDatabaseO method- 


db, int oldVersion, 
newVersion); 


int newVersion) 


{ 


The £ode Continues over the page. 
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Upgrade database 


The SQlite helper code (continued) 

private static void insertDrink(SQLiteDatabase db, String name, 

String description, int resourceld) { 
ContentValues drinkValues = new ContentValues(); 
drinkValues.put("NAME", name); 
drinkValues.put("DESCRIPTION", description); 
drinkValues.put("IMAGE_RESOURCE_ID", resourceld); 
db.insert("DRINK", null, drinkValues); 


private void updateMyDatabase(SQLiteDatabase db, int oldVersion, int newVersion) { 
if (oldVersion < 1) { 

db.execSQL("CREATE TABLE DRINK (_id INTEGER PRIMARY KEY AUTOINCREMENT, " 

+ "NAME TEXT, " 

+ "DESCRIPTION TEXT, " 

+ "IMAGE_RESOURCE_ID INTEGER);"); 

insertDrink(db, "Latte", "Espresso and steamed milk", R.drawable.latte); 
insertDrink(db, "Cappuccino", "Espresso, hot milk and steamed-milk foam", 
R.drawable.cappuccino); 

insertDrink(db, "Filter", "Our best drip coffee", R.drawable.filter); 


} 


} 


if 

} 


(oldVersion < 2) { 

db.execSQL("ALTER TABLE DRINK ADD COLUMN FAVORITE NUMERIC;"); 


r 

Add a Kumeirid FA VORITB 
-to -the DR -table- 


□ 

Starbuzz 

mu 


The new code in the SQLite helper means that existing users will 
get the new FAVORITE column added to the DRINK table the 
next time they access the database. It also means that any new 
users will get the complete database created for them, including 
the new column. 


app/sre/main 

MU 


java 


La 


com. hfad. starbuzz 

u 


We’ll go through what happens when the code runs on the next 
page. Then in the next chapter, you’ll see how to use the database 
data in your activities. 


StarbuzzDatabase 

Helper.java 
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What 

O 


happens when the code runs 

When the database first needs to be accessed, the SQLite helper checks 
whether the database already exists. 



SQLite helper 




If the database doesn't exist, the SQLite helper creates it and runs its 
onCreate() method. 

Our onCreate () method code calls the updateMyDatabase () method. This creates the 
DRINK table (including the new FAVORITE column) and populates the table with records. 



DRINK 


SQLite database 


onCreateQ 


SQLite helper 


Name: "starbuzz" 
Version: 2 



If the database already exists, the SQLite helper checks the version number 
of the database against the version number in the SQLite helper code. 

If the SQLite helper version number is higher than the database version, it calls the 
onUpgrade () method. If the SQLite helper version number is lower than the database 
version, it calls the onDowngrade () method. Our SQLite helper version number is 
higher than that of the existing database, so the onUpgrade () method is called. It calls the 
updateMyDatabase () method, and this adds the new FAVORITE column to the DRINK 
table. 



DRINK 



SQLite database 


Name: "starbuzz" 
Version^ 2 
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solution 


BE 3QLft e Stiffen 



On the right you’ll See some SQjite 
helper code. Your job is to play like 
you’re the SQlite helper and 
say which code will run 
for each of the users 
below. We’ve labeled 
the code we want you to 
consider. We’ve done the 
first one to start you off. 

User 1 runs the app for the first time. 


class MyHelper extends SQLiteOpenHelper{ 

StarbuzzDatabaseHelper(Context context){ 
super (context, "fred", null, 4); 

} ^ c 

The new version o\ 

@Override the dd'tdbdse is 

public void onCreate(SQLiteDatabase db){ 
0//Run code A X” The on C \reaie 0 method will 
ov \ly run i-P -the user doesn’t 
^ have -the database. 


Code segment A- The user doesn’t have the 
database, so the onCreateO method runs. 

User 2 has database version 1. 

Code segment B, then P- The database needs to be 
upgraded with oldVersion I. 

User 3 has database version 2. 

Code segment P- The database needs to be 
upgraded with oldVersion 2~ 

User 4 has database version 3. 


QOverride 

public void onUpgrade(SQLiteDatabase db, 

int oldVersion, 
int newVersion){ 


if (oldVersion 
//Run code 


© 


< 2 ) { 

B ^r-^This will run i-P the 
user has version I- 


} 


if (oldVersion 
© //Run code 


== 3) { 

c <—This will i-P -the 
user has version 3. 


© 


} 

//Run code D ^- T his will run i-P the user 
has version I, 2-, or 3 . 


Code segment C then P- The database needs to be 
upgraded with oldVersion 3. 

User 5 has database version 4. 

None- The user has the dorredt version @4* the 
database. 

User 6 has database version 5. 

Code segment F The database needs to be 
downgraded with oldVersion *5. 
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QOverride 

public void onDowngrade(SQLiteDatabase db, 

int oldVersion, 
int newVersion){ 


if (oldVersion 
//Run code 


o 


} 

if (oldVersion 
//Run code 


3) 


6 ) { 




This will never run. 
I-P the user has 
~ version Z, their 
database needs to 
be upgraded, not 
downgraded. 


This will run i-P the user has version For 
onPowngradeO to run, the user must have 
a version greater than as thats the 
durrent version number the helper. 


SQLite databases 



Here's the onCreate () method of a SQLiteOpenHelper 

class. Your job is to say what values have been inserted into the 
NAME and DESCRIPTION columns of the DRINKtable when the 
onCreate () method has finished running. 


QOverride 

public void onCreate(SQLiteDatabase db) { 

ContentValues espresso = new ContentValues(); 
espresso.put("NAME", "Espresso"); 

ContentValues americano = new ContentValues(); 
americano.put("NAME", "Americano"); 

ContentValues latte = new ContentValues(); 
latte.put("NAME", "Latte"); 

ContentValues filter = new ContentValues(); 
filter.put("DESCRIPTION", "Filter"); 

ContentValues mochachino = new ContentValues(); 
mochachino.put("NAME", "Mochachino"); 

Create tte table, adding Jd, NAME, 

DESCRIPTION toluroiftS. 

db.execSQL ("CREATE TABLE DRINK (" 4T M 

+ "_id INTEGER PRIMARY KEY AUTOINCREMENT, " 

+ "NAME TEXT, " 

+ "DESCRIPTION TEXT);"); 

db. insert ("DRINK", null, espresso) ; <<T ^ SSO m MAMB 

db. insert ("DRINK", null, americano) ; ^-^l hSCV “t A^CV-i tdno \v\ the NAME £olur»w. 

db. delete ("DRINK", null, null) ; all the dmks. 

db. insert ("DRINK", null, latte) ; Insert Latte in "the NAME dolurwh- 

db.update("DRINK", mochachino, "NAME = ?", new String[] {"Espresso"}); 

db.insert("DRINK", null, filter); Set NAME to Modbadhmo where NAME 

} Insert Filter in the DESCRIPTION doUn. is N ° ** 


Here s 
the -Pinal 
result 

the above 
£ode. 


id 

NAME 

DESCRIPTION 


Latte 




Filter 
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toolbox 



Your Android Toolbox 


You’ve got Chapter 15 under 
your belt and now you’ve 
added creating, updating, 
upgrading databases to your 

toolbox. 


You tan download 
-the -pull tode -for 
■the thapter from 

htbp^//"tinywrl-tom/ 
HeadfirstAndroid- 



BULLET POINTS 


■ Android uses SQLite as its backend 
database to persist data. 


The onupgrade () method gets called 
when the database needs to be upgraded. 


The SQLite Database class gives ■ 
you access to the SQLite database. 

A SQLite helper lets you create and 
manage SQLite databases. You create ■ 
a SQLite helper by extending the 

SQLiteOpenHelper class. 

You must implement the 

SQLiteOpenHelperonCreate() ■ 

and onupgrade () methods. 


Execute SQL using the 

SQLiteDatabase 
execSQL (String) method. 

Use the SQL alter table command 
to change an existing table. Use rename 
to to rename the table, and add 
column to add a column. 

Use the SQL drop table command 
to delete a table. 


The database gets created the first time it 
needs to be accessed. You need to give 
the database a name and version number, 
starting at 1. If you don’t give the database 
a name, it will just get created in memory. 

The onCreate () method gets called 
when the database first gets created. 


■ Add records to tables using the 
insert () method. 

■ Update records using the update () 
method. 

■ Remove records from tables using the 
delete () method. 
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16 basic cursors 




Getting Data Out + 


Charles gave me 
a cursor that returned 
everything from the 
EXPENSIVE GIFT table 


So how do you connect your app to a SQLite database? 

So far you’ve seen how to create a SQLite database using a SQLite helper. The next step 
is to get your activities to access it. In this chapter, we’ll focus on how you read data from 
a database. You’ll find out how to use cursors to get data from the database. You’ll see 
how to navigate cursors, and how to get access to their data. Finally, you’ll discover 
how to use cursor adapters to bind cursors to list views. 


this is a new chapter 657 


where we are 


The story so far... 


In Chapter 15, you created a SQLite helper for Starbuzz 
Coffee. The SQLite helper creates a Starbuzz database, 
adds a DRINK table to it, and populates the table with 
drinks. 


The activities in the Starbuzz app currently get their data 
from the Java Drink class. We’re going to change the app 
so the activities get data from the SQLite database instead. 

Here’s a reminder of how the app currently works: 


© 

© 


TopLevelActivity disploys a list of options for Drinks, 
Food, and Stores. 

When the user clicks on the Drinks option, it 
launches DrinkCategoryActivity. 

This activity displays a list of drinks that it gets from the Java 
Drink class. 


O 


When the user clicks on a drink, its details get 
displayed in DrinkActivity. 

DrinkActivity gets details of the drink from the Java Drink 
class. 


1 /Ve've dv-eated the 
SQLite helper and 
added dode so it 
dan dv-eate the 
Stav-buzz. database. 


It s not being used 



Starbuzz 

database 


SQLite Helper 


The Prink dlass is still being used- 


<Layou-t> I 
</Layou-fc> I 

activity_top_level.xml 


Device 


TopLevelActivity.java 


<Layou-t> 


</Layou-fc> 


activity_drink_ 
category.xml 


o 

Drink.java 





<Layou-t> 

</Layou-t> 

activity_drink.xml 



°/“\ 


DrinkCategoryActivity.java DrinkActivity.java 

s/- 

Dvink/\dtivity 3nd 
PvinkCategovyAdtivity are 
still addessing Pvinkjava. 
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The new Starbuzz app structure 


There are two activities that use the Drink class: 
DrinkActivity and DrinkCategoryActivity. 

We need to change these activities so that they read data 
from the SQLite database with assistance from the SQLite 
helper. 

Here’s what the new structure of the Starbuzz app will look 
like: 


Device 


<Layou-t> I 
</Layou-fc> I 

activity_top_level.xml 


<Layou-fc> I 
</Layou-fc> 


:/Layou-t> 


activity_drink 

category.xml 




activity_drink.xml 


TopLevelActivity.java 


We will lo^cv* be 
us'm$ ike Pv'mk dlass. 


DrinkCategoryActivity.java 



DrinkActivity.java 



lA/ell dkanje -the adiiviiies ikai 
addess ike Drink dlass so ikai ikey 
use ike database instead. 


Drink.java 


We’ll start by updating DrinkActivity, and we’ll 
change DrinkCategoryActivity later on in the 
chapter. 



T 

Da this? 


We’re going to update the 
Starbuzz app in this chapter, 
so open your Starbuzz 
project in Android Studio. 


you are here ► 


659 













steps 


What well do to change PrinkActivity 
to use the Starbuzz database 


There are a number of steps we need to go through to change 
DrinkActivity so that it uses the Starbuzz database: 


o 


Get a reference to the Starbuzz database. 

We’ll do this using the Starbuzz SQLite helper we created in Chapter 15. 



Q 

© 

© 


Create a cursor to read drink data from the database. 

We need to read the data held in the Starbuzz database for the drink the 
user selects in DrinkCategoryActivity. The cursor will give us 
access to this data. (We’ll explain cursors soon.) 

Navigate to the drink record. 

Before we can use the data retrieved by the cursor, we need to explicitly 
navigate to it. 

Display details of the drink in DrinkActivity. 

Once we’ve navigated to the drink record in the cursor, we need to read 
the data and display it in DrinkActivity. 



Before we begin, let’s remind ourselves of the 
DrinkActivity.java code we created in Chapter 7 
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The current PrinkActivity code 

Below is a reminder of the current DrinkActivity.java code. The 
onCreate () method gets the drink ID selected by the user, gets 
the details of that drink from the Drink class, and then populates 
the activity’s views using the drink attributes. We need to change 
the code in the onCreate () method to get the data from the 
Starbuzz database. 


Database reference 
Create cursor 
Navigate to record 
Display drink 


package com.hfad.starbuzz; 

• • • ^— WeVe no*t showing you 
-the import statements. 

public class DrinkActivity extends Activity { 


□ 

Starbuzz 

L C3 

app/sre/main 


public static final String EXTRA_DRINKID = "drinkld"; 
@Override 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_drink); 


java_ 

na 

com.hfad.starbuzz 



D r i n k Acti vi ty.j ava 


We need to 
populate the . 
views in the 
layout with 
values -from 
the database, 
not -Prom the 
Drink dass. 



This is the drink the user selected- 

//Get the drink from the intent ^ 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 

Drink drink = Drink.drinks[drinkld]; ^-Use the drink ID -Prom the intent to ^et the 

drink details £rom the Drink dass. We II need to 

//Populate the drink name thanje this so the drink donees -pron> the database 

TextView name = (TextView)findViewByld(R.id.name); 
name.setText(drink.getName()); 

//Populate the drink description 

TextView description = (TextView)findViewByld(R.id.description); 

'description.setText(drink.getDescription()); 

//Populate the drink image 

ImageView photo = (ImageView)findViewByld(R.id.photo); 
photo.setlmageResource(drink.getlmageResourceld()); 
photo.setContentDescription(drink.getName()); 


} 
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fret a reference to the database 

The first thing we need is to get a reference to the Starbuzz database 
using the SQLite helper we created in the last chapter. To do that, 
you start by getting a reference to the SQLite helper: 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 

You then call the SQLite helper’s getReadableDatabase () or -p^- s |S a £ 0 nte*t> m -this 

getWritableDatabase () to get a reference to the database. You £uv-vent activity- 

use the getReadableDatabase () method if you need read¬ 
only access to the database, and the getWritableDatabase () 
method if you need to perform any updates. Both methods return a 
SQLiteDatabase object that you can use to access the database: 

SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 

or: 

SQLiteDatabase db = starbuzzDatabaseHelper.getWritableDatabase(); 


Database reference 
Create cursor 
Navigate to record 
Display drink 


If Android fails to get a reference to the database, a 
SQLiteException is thrown. This can happen if, for example, you 
call the getWritableDatabase () to get read/write access to the 
database, but you can’t write to the database because the disk is full. 

In our particular case, we only need to read data from the database, so 
we’ll use the getReadableDatabase () method. If Android can’t 
get a reference to the database and a SQLiteException is thrown, 
we’ll use a Toast (a pop-up message) to tell the user that the database 
is unavailable: 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 


SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 
//Code to read data from the database 
} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, 

"Database unavailable" 

Toast.LENGTH_SHORT); 

toast.show(); 


} 


"This line displays -the -toast- 


Once you have a reference to the database, you can get data from it 
using a cursor. We’ll look at cursors next. 


These lines ev-eate a Toast that 
will display the message ''Database 
unavailable” *fov a -few seconds- 

i 


Database unavailable 
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fret data from the database with a cursor 

As we said in Chapter 15, a cursor lets you read from and write 
to the database. You specify what data you want access to, and the 
cursor brings back the relevant records from the database. You can 
then navigate through the records supplied by the cursor. 



basic cursors 

Database reference 
Create cursor 
Navigate to record 
Display drink 



You create a cursor using a database query. A database query lets 
you specify which records you want access to from the database. As 
an example, you can say you want to access all the records from the 
DRINK table, or just one particular record. These records are then 
returned in the cursor. 


You create a cursor using the SQLiteDatabase query () method: 


The <p»ery0 method 
returns 3 Ci/vsov object —^ 


Cursor cursor = db.query (...) 


The <\ueryO method parameters op here- 
Well look at them over the ne*t tew pays. 


There are many overloaded versions of this method with different 
parameters, so rather than go into each variation, we’re only going to 
show you the most common ways of using it. 


you are here ► 


663 





















queryQ 


Return all the records from a table 

The simplest type of database query is one that returns all the 
records from a particular table in the database. This is useful 
if, for instance, you want to display all the records in a list in an 
activity. As an example, here’s how you’d return the values in 

the_id, NAME, and DESCRIPTION columns for every record 

in the DRINK table: 



Database reference 
Create cursor 
Navigate to record 
Display drink 


This is the name of the table. 




Cursor cursor = db.query( "DRINK" 


VVc want to return the 
values in these Columns. 

new String[] {"_id","NAME", "DESCRIPTION"}, 

Set these pav-a^etm fo null nullf nuU , null, null, null); 
when you want to return all 
records -Prom a table- 


The cyuery returns all the data -from —^ 

the __id> N/\ME> and DESCRIPTION 

Columns in the DRIN^ table- 


id 

NAME 

DESCRIPTION 

1 

“Latte” 

"Espresso and steamed milk" 

2 

“Cappuccino” 

"Espresso, hot milk and 



steamed-milk foam" 

3 

“Filter” 

"Our Pest drip coffee" 


To return all the records from a particular table, you pass the 
name of the table as the query () method’s first parameter, and 
a String array of the column names as the second. You set all of 
the other parameters to null, as you don’t need them for this 
type of query. 

Cursor cursor = db.query(" TABLE_NAME ", 


You specify eath dolumn whose value you 
want to return in an array of Strings- 


new String[] {"COLUMN1","COLUMN2"}, 

There are -five e*tra parameters — ^ null, null, null, null, null); 
you need to set to null- 


Next we’ll look at how you can return the records in a particular 
order. 


Behind the scenes, 
Android uses the 
cjueryO method to 
construct an SQL 
SELECT statement. 
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basic cursors 


Return records in a particular order 

If you want to display data in your app in a particular order, you 
use the query to sort the data by a particular column. This can 
be useful if, for example, you want to display drink names in 
alphabetical order. 

By default, the data in the table appears in _id order, as this was 
the order in which data was entered: 


V/ 


Database reference 
Create cursor 
Navigate to record 
Display drink 


id 

NAME 

DESCRIPTION 

IMAGE RESOURCE ID 

FAVORITE 

1 

“Latte” 

"Espresso and steamed milk" 

54543543 

0 

S 

“Cappuccino” 

"Espresso, hot milk and 
steamed-milk foam" 

654334453 

0 

3 

“Filter” 

"Our best drip coffee" 

44324234 

1 


If you wanted to retrieve data from the_id, NAME, and 

FAVORITE column in ascending NAME order, you would use 
the following: 


Cursor cursor = db.query("DRINK", 

new String[] {"_id", "NAME", "FAVORITE"}, 

null, null, null, null, 

"NAME ASC") 


' V- Order by NAME in ascending order. 


id 

NAME 

FAVORITE 

2 

“Cappuccino” 

0 

3 

“Filter” 

1 

1 

“Latte” 

0 


The ASC keyword means that you want to order that column 
in ascending order. Columns are ordered in ascending order by 
default, so if you want you can omit the ASC. To order the data 
in descending order instead, you’d use DESC. 


You can sort by multiple columns too. As an example, here’s how 
you’d order by FAVORITE in descending order, followed by 
NAME in ascending order: 


Cursor cursor = db.query("DRINK", 

new String[] {"_id", "NAME", "FAVORITE"}, 

null, null, null, null, 

"FAVORITE DESC, NAME" ) Order by FAVORlTB in 

order, -then 

MAMfc in ascending order. 

Next we’ll look at how you return selected records from the 
database. 


id 

NAME 

FAVORITE 

3 

“Filter” 

i 

2 

“Cappuccino” 

0 

1 

“Latte” 

0 
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specify conditions 


Return selected records 

You can filter your data by declaring conditions the data must meet, 
just as you did in Chapter 15. As an example, here’s how you’d 
return records from the DRINK table where the name of the drink 
is “Latte”: 



Database reference 
Create cursor 
Navigate to record 
Display drink 


Cursor cursor = db.query("DRINK", 


These ave ihe Columns we want *to v-etuvn. 


new String[] {"id", "NAME", "DESCRIPTION"}, 


"NAME = ?",< 
new String[] 


{"Latte"}, 


I/Ve wa*-1 io reiui™ re£ov-ds where ihe 
value o-P -the /V/ME eolumn is ''La^bte” 


null, null, null); 

The third and fourth parameters in the query describe the 
conditions the data must meet. 

The third parameter specifies the column in the condition. In the 
above example we want to return records where the value of the 
NAME column is “Latte”, so we use "NAME = ?". We want the 
value in the NAME column to be equal to some value, and the ? 
symbol is a placeholder for this value. 

The fourth parameter is an array of Strings that specifies what the 
value of the condition should be. In the above example we want to 
update records where the value of the NAME column is “Latte”, so 
we use: 


id 

NAME 

DESCRIPTION 

1 

“Latte” 

"Espresso and 
steamed milk" 


The <^*evy v-ctuv-ns dll "the data tv-om 

the NAME a*d DESCRIPTION 
tolwnns in the DRIN^ table >wheve the 
value ot the NAME dolwnn is "Latte"- 


new String[] {"Latte"}; 


The value of the condition must be an array of Strings, even if the 
column you’re applying the condition to contains some other type 
of data. As an example, here’s how you’d return records from the 
DRINK table where the drink _id is 1: 


Cursor cursor = db.query("DRINK", 

new String[] {"_id 

" id = ?", 


M II TV 


NAME", "DESCRIPTION"}, 

^- Convert 'the irrll I *to a £*brm<) value- 

new String[] {Integer.toString(1)}, 


null, null, null); 

You’ve now seen the most common ways of using the query () 
method to create a cursor, so try the following exercise to 
construct the cursor we need for DrinkActivity.java. 




s< \! 


AYte/S^ 
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basic cursors 



Code Magnets 

In our code for DrinkActivity, we want to get the name, 
description, and image resource ID for the drink ID passed to it in an 
intent. Can you create a cursor that will do that? 


int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 

//Create a cursor 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 

Cursor cursor = db.query( , 

new String[] { , , }, 


new String[] { }, 


null, null, null); 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT); 
toast.show(); 


You WOY\ t i\tt& *to use 
all o( 'bhe r*3y>e*ls- 
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magnets solution 



Code Magnets Solution 

In our code for DrinkActivity we want to get the name, 
description, and image resource ID for the drink passed to it in an 
intent. Can you create a cursor that will do that? 


int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 


//Create a cursor 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 

— We v/an-t -to addess -the PRIN^ table- 

fct the NAME, DESCRIPTION, a*d IMA$E_RE£0URCEJD- 

, /~^" de SCRXptj 0n ,, ^ 1 , 

Where Jd maidhes -the dr'mkld 



"IMAGE RESOURCE ID" 


1 


new String[] { Integer 


toString 11(1 drinkld ) I } f 


null, null, null); drihkld is a« mt, so heeded-to 

} catch (SQLiteException e) { be dohvevted -to a £-trih<y 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT); 
toast.show() ; 

} 


You didn't need “to 
use -this r^aonet 

4 
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The PrinkActivity code so far 

We want to change DrinkActivity.javd s onCreate () method so 
that DrinkActivity gets its drink data from the Starbuzz 
database instead of from the Drink Java class. Here’s the code 
so far (we suggest you wait until we show you the full code—a few 
pages ahead—before you update your version of DrinkActivity.java): 


-►0 


basic cursors 

Database reference 
Create cursor 
Navigate to record 
Display drink 


package com.hfad.starbuzz; 


Our Starbuzz. eode uses the Activity £lass, 

_bu-t we Could have chafed the Code to 

use ApfComipatActWity it we’d wanted to. 

public class DrinkActivity extends Activity { 


public static final String EXTRA_DRINKID = "drinkld"; 

@Override ^ W ’« 11 add the Code to the onCveateO method- 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink); 


□ 

Starbuzz 


Ha 

app/sre/main 

java 


com.hfad.starbuzz 

Lg 

D r i n k Acti vi ty.j ava 


//Get the drink from the intent 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 

WeVe no longen jetting 
the drinks tnom Drink java 

//Create a cursor 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { ^et a 

SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase () ; reference 
Cursor cursor = db.query ("DRINK", 

Cvea-te a Cursor to get new Strin 9 [ ] * "NAME" 
the name ; description "_id = ?" , 

and image resource ID new String[] {Integer. toString (drinkld) }, 
o£ the drink the user null, null, null); 

selected- 


"DESCRIPTION", "IMAGE_RESOURCE_ID"}, 


to the 
database. 


} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable" 


... 4T 


toast.show(); 

There’s more Code we 


haven’t changed yet; 
but you don’t need to 
see it right now. 


T' 

Display a pop-up message i-P a 
S$Lite£xCept ion is thrown- 


Toast.LENGTH SHORT) 


Now that we’ve created our cursor, the next thing we need to do 
is get the drink name, description, and image resource ID from 
the cursor so that we can update DrinkActivity’s views. 
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navigate records 


To read a record from a cursor, 
you first need to navigate to it 

You’ve now seen how to create a cursor; you get a reference 
to a SQLiteDatabase, and then use its query () method 
to say what data you want the cursor to return. But that’s not 
the end of the story—once you have a cursor, you need to 
read values from it. 

Whenever you need to retrieve values from a particular record 
in a cursor, you first need to navigate to that record. 



Database reference 
Create cursor 
Navigate to record 
Display drink 



In our particular case, we have a cursor that’s composed of a 
single record that contains details of the drink the user selected. 
We need to navigate to that record in order to read details of the 
drink. 
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Navigate cursors 

There are four main methods you use to navigate through the records in 
a cursor: moveToFirst (), moveToLast (), moveToPrevious (), 
and moveToNext () . 


basic cursors 

Database reference 
Create cursor 
Navigate to record 
Display drink 


Move -to i ] he -first row. 



To go to the first record in a cursor, you use its moveToFirst () method. 
This method returns a value of true if it finds a record, and false if the 
cursor hasn’t returned any records): 

if (cursor.moveToFirst()) { 

//Do something 

}; 

To go to the last record, you use the moveToLast () method. Just like the 
moveToFirst () method, it returns a value of true if it finds a record, 
and false if it doesn’t: 

if (cursor.moveToLast()) { 

//Do something 

}; 


i 



To move through the records in the cursor, you use the 
moveToPrevious () and moveToNext () methods. 


A; 

Move -to -the last V"OW. 


The moveToPrevious () method moves you to the previous record in 
the cursor. It returns true if it succeeds in moving to the previous record, 
and false if it fails (for example, if it’s already at the first record): 

if (cursor.moveToPrevious()) { 

//Do something 

}; 


The moveToNext () method works in a similar way to the 
moveToPrevious () method, except that it moves you to the next 
record in the cursor instead: 

if (cursor.moveToNext()) { 

//Do something 

}; 



In our case, we want to read values from the first (and only) record in 
the cursor, so we’ll use the moveToFirst () method to navigate to this 
record. 




Move -fco -the nex-t 


v-ow. 


Once you’ve navigated to a record in your cursor, you can access its values. 
We’ll look at how to do that next. 
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get values 


fret cursor values 

You retrieve values from a cursor’s current record using the 
cursor’s get* () methods: getString (), getlnt (), and so 
on. The exact method you use depends on the type of value you 
want to retrieve. To get a String value, for example, you’d use 
the getString () method, and to get an int value you’d use 
getlnt () . Each of the methods takes a single parameter: the 
index of the column whose value you want to retrieve, starting at 0. 

As an example, we’re using the following query to create our cursor: 



Database reference 
Create cursor 
Navigate to record 
Display drink 


Cursor cursor = db.query ("DRINK", 

new String[] {"NAME", "DESCRIPTION", "IMAGE_RESOURCE_ID"}, 
"_id = ?", 

new String[] {Integer.toString(1)}, 


null, null, null); 


The cursor has three columns: NAME, DESCRIPTION, and 
IMAGE_RESOURCE_ID. The first two columns, NAME and 
DESCRIPTION, contain Strings, and the third column, 
IMAGE_RESOURCE_ID, contains int values. 

Suppose you wanted to get the value of the NAME column for 
the current record. NAME is the first column in the cursor, and 
contains String values. You’d therefore use the getString () 
method, passing it a parameter of 0 for the column index: 


These ave -the duvsors £olur»ms. 



NAME 

DESCRIPTION 

IMAGE. 

RESOURCE.ID 

“Latte” 

"Espresso and 
steamed milk" 

54543543 


String name = cursor.getString(0); 


N/MS is dolumn O and doniains Stvin^s. 


Similarly, suppose you wanted to get the contents of the 
IMAGE_RESOURCE_ID column. This has a column index of 2 and 
contains int values, so you’d use the code: 


int imageRe source - cursor .getlnt (2) ,•<_ M&_KSSmC£Jt> n 2- led tatin 


Finally, close the cursor and the database 


Once you’ve finished retrieving values from the cursor, you need to close 
the cursor and the database in order to release their resources. You do this 
by calling the cursor and database close () methods: 


cursor.close();j 

db.close () ; j^These lines dlose "the duvsov and "the da*tabase- 


We’ve now covered all the code you need to replace the code in 
DrinkActivity so that it gets its data from the Starbuzz database. 
Let’s look at the revised code in full. 


I tv t**> f 
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The PrinkActivity code 

Here’s the full code for DrinkActivity.java (apply the changes in bold to 
your code, then save your work): 



basic cursors 

Database reference 
Create cursor 
Navigate to record 
Display drink 


package com.hfad.starbuzz; 

import android.app.Activity; 
import android.os.Bundle; 
import android.widget.ImageView; 
import android.widget.TextView; 

import android.widget.Toast; 
import android.database.Cursor; 
import android.database.sqlite.SQLiteDatabase; 
import android.database.sqlite.SQLiteException; 
import android.database.sqlite.SQLiteOpenHelper; 


□ 

Starbuzz 


WeVe us'rn^ -these extva 

, classes in the dode- 



4Z3 

app/sre/main 

java 


Ma 

com.hfad.starbuzz 

L @ 

DrinkActivity.java 


public class DrinkActivity extends Activity { 


public static final String EXTRA_DRINKID 


"drinkld"; 


QOverride 

protected void onCreate(Bundle savedlnstanceState) 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink); 


//Get the drink from the intent 


This is the ID ot the 
dv-ink the user dhose- 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 

WeVe ,0 Uger getting our date to. the 
d»rmks array, so we need te delete this |i*e. 

//Create a cursor 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 

Cursor cursor = db.query ("DRINK", 

^ new String[] {"NAME", "DESCRIPTION", "IMAGE_RESOURCE_ID"}, 

Create a dursor that $ets the "_id = ?", 

NAM^; DESCRIPTION* and 4A^E__ new String [] {Integer. toString (drinkld) }, 

RKouRCEjD f™. mm mll null „ 11); 

table where_id matdhes drinkld- 


The dode dontinues 
on the ne*t page- 
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code, continued 


The PrmkActivity code (continued) 


v/ 

■*k/ 


//Move to the first record in the Cursor 

if (cursor .moveToFirst ()) { ^— Therms only one record in “the Cursor, 

r but we still need to rwove to it- 

The name o-r "the 

dv-ink is -the -fivs-t //Get the drink details from the cursor 
item in the Cursor!^ String nameText = cursor.getstring(0) ; 


Database reference 
Create cursor 
Navigate to record 
Display drink 


■the description 
is -the second 
Column, and ‘the 
image resource 
ID is -the -third- 
Thats because we 
told the Cursor 
to use the N/WE, 

description, 

and |/1/|A#L 

RES0URCEJD 

Columns -Prom the 

database in that 
order. 


String descriptionText = cursor.getString(1) 
int photold = cursor.getlnt(2); 


//Populate the drink name 

TextView name = (TextView)findViewByld(R.id.name); 

s^ ame &4r 

name.setText(nameText); 


□ 

Starbuzz 

4a 

app/sre/main 

MB 


java 



MTJ 


Set the drink name to the 
value -Prom the database. 


com.hfad.starbuzz 

u 


DrinkActivity.java 

//Populate the drink description 

TextView description = (TextView)findViewByld(R.id.description ); 

| / ( sc description 

description. setText (descriptionText) ; -prom the database- 


//Populate the drink image 

ImageView photo = (ImageView)findViewByld(R.id.photo); 


photo.setlmageResource(photold); 
photo.setContentDescription(nameText); 




} 


cursor. close () ; 

db. close () ; —' Close the Cursor and database- 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, 

"Database unavailable" 


Toast.LENGTH SHORT); 


toast.show(); 

'V 

l-p a £$LiteE*Ception is thrown, this means 
there’s a problem with the database- In this case, 
well use a toast to display a message to the user. 


Set the image resource ID 
and description to the values 
-Prom the database- 



( T$a* 


Connecting your 
activities to a database 
takes more code than 
using a Java class. 


So that’s the complete DrinkActivity code. Let’s 
review where we’ve got to, and what we need to do next. 


But if you take your time working through 
the code in this chapter, you’ll be fine. 
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basic cursors 


What we've done so far 


Now that we’ve finished updating the DrinkActivity.java code, let’s 
look at the app structure diagram to see what we’ve done, and 
what we need to do next. 


Dv-ihkCaicjov-yA^-tivi-ty siill yb i-b 
dv-’mk data -(Vom -the Dvink dass. 


<Layou-fc> 


</Layou-t> 


<Layoui> 


</Layou-t> 


activity_top_level.xml 
" \ 


activity_drink_ 
category.xml 


o 

Drink.java 


Device 


TopLevel Activity .java 


DnnkCategoryActivity.java 


DrinkActivity now gets all of its drink data from the 
Starbuzz database. Next, we need to update the code in 
DrinkCategoryActivity so that it uses data from 
the database rather than from the Java Drink class. We’ll 
look at the steps to do this on the next page. 



activity_drink.xml 

1 



Starbuzz 

database 



SQLite Helper 


DrinkActivity.java 

T 

DvmkA^tivrty has 
been dhan^ed so 

i*t $eta i*b data 

-Cv-om the Stav-buzz. 
database via the 
SQLite belpev- 


the reiare no 

Dumb Questions 



How much SQL do I need to know to create cursors? 


It’s useful to have an understanding of SQL SELECT 
statements, as behind the scenes the query () method 
translates to one. In general, your queries probably won’t be too 
complex, but SQL knowledge is a useful skill. 


If you want to learn more about SQL, we suggest getting a copy of 
Head First SQL by Lynn Beighley. 



You said that if the database can’t be accessed, a 


SQLiteException is thrown. How should I deal with it? 


First, check the exception details. The exception might be 
caused by an error in SQL syntax, which you can then rectify. 


How you handle the exception depends on the impact it has 
on your app. As an example, if you can get read access to the 
database but can’t write to it, you can still give the user read-only 
access to the database, but you might want to tell the user that you 
can’t save their changes. Ultimately, it all depends on your app. 
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more steps 


What well do to change PrinkCategoryActivity 
to use the Starbuzz database 

When we updated DrinkActivity to get it to read data 
from the Starbuzz database, we created a cursor to read data 
for the drink the user selected, and then we used the values 
from the cursor to update DrinkActivity’s views. 

The steps we need to go through to update 
DrinkCategoryActivity are slightly different. This is 
because DrinkCategoryActivity displays a list view 
that uses the drink data as its source. We need to switch the 
source of this data to be the Starbuzz database. 

Here are the steps we need to go through to change 
DrinkCategoryActivity so that it uses the Starbuzz 
database: 


o 


Create a cursor to read drink data from the database. 

As before, we need to get a reference to the Starbuzz database. Then we’ll 
create a cursor to retrieve the drink names from the DRINK table. 



Database 


o 


Replace the list views array adapter with a cursor adapter. 

The list view currently uses an array adapter to get its drink names. This is 
because the data’s held in an array in the Drink class. Because we’re now 
accessing the data using a cursor, we’ll use a cursor adapter instead. 



ListView CursorAdapter 



Before we get started on these tasks, let’s remind 
ourselves of the DrinkCategoryActivity.java code we 
created in Chapter 7. 
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The current PrinkCategory Activity code 

Here’s a reminder of what the current DrinkCategoryActivity.java code looks 
like. The onCreate () method populates a list view with drinks using an 
array adapter. The onListltemClick () method adds the drink the 
user selects to an intent, and then starts DrinkActivity: 

package com.hfad.starbuzz; 


public class DrinkCategoryActivity extends Activity { 


basic cursors 

Create cursor 
Cursor adapter 



hi the 

moment* we V*C 
usin$ an 
Avv-ayAdaptev- 
to bind an 
avv-ay to the 

1/Ve need to 
replade this 
eode so that 
the data 

domes -fy-om 

a database 
instead- 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_drink_category); 
ArrayAdapter<Drink> listAdapter = new ArrayAdapterO( 
this, 

android.R.layout.simple_list_item_l, 

Drink.drinks); 

ListView listDrinks = (ListView) findViewByld(R.id.list_drinks) 
listDrinks.setAdapter(listAdapter) ; 


□ 

Starbuzz 

app/sre/main 

4 Z 3 

java 

LQ 

com. hfad .starbuzz 

Li 


DrinkCategory 

Activity.java 


//Create a listener to listen for clicks in the list view 
AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listDrinks, 

View itemView, 
int position, 
long id) { 

//Pass the drink the user clicks on to DrinkActivity 
Intent intent = new Intent(DrinkCategoryActivity.this, 
DrinkActivity.class); 

intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int) id); 
startActivity(intent); 

} 


//Assign the listener to the list view 

listDrinks.setOnitemClickListener(itemClickListener); 


} 
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get a database reference 


fret a reference to the Starbuzz database... 



Create cursor 
Cursor adapter 


We need to change DrinkCategoryActivity so that it gets its 
data from the Starbuzz database. Just as before, this means that we 
need to create a cursor to return the data we need. 

We start by getting a reference to the database. We only need 
to read the drink data and not update it, so we’ll use the 
getReadableDatabase () method as we did before: 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 


...then create a cursor that returns the drinks 

To create the cursor, we need to specify what data we want it to contain. We 
want to use the cursor to display a list of drink names, so the cursor needs 
to include the NAME column. We’ll also include the _id column to get 
the ID of the drink: we need to pass the ID of the drink the user chooses to 
DrinkActivity so that DrinkActivity can display its details. Here’s 
the cursor: 


V 

We get a re-f erente to the 
database in exactly the same way 
that we did earlier in this chapter. 


db.query("DRINK", 

new String[]{"_id", "NAME"}, 
null, null, null, null, null) 


This dursor rcWhs the _jd and NAM£ 
0 -C every vetoed in the PRIN^ table- 


Putting this together, here’s the code to get a reference to the database 
and create the cursor (you’ll add this code to DrinkCategoryActivity.java 
later when we show you the full code listing): 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 
cursor = db.guery("DRINK", 

new String[]{"_id", "NAME"}, 
null, null, null, null, null); 

//Code to use data from the database ^ database is unavailable, a £$Litd£*<*ption 

} catch (SQLiteException e) { _thrown- |*P this happens, well use a toast to 

Toast toast = Toast .makeText (this, display a pop-up message as be-Pore- 

"Database unavailable". 

Toast.LENGTH_SHORT); 

toast.show(); 


Next we’ll use the cursor’s data to populate 
DrinkCategoryActivity’s list view. 
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How do we replace the array data 
in the list view? 



basic cursors 

Create cursor 
Cursor adapter 


When we wanted DrinkCategoryActivity’s list view 
to display data from the Drink, drinks array, we used 
an array adapter. As you saw back in Chapter 7, an array 
adapter is a type of adapter that works with arrays. It acts as 
a bridge between the data in an array and a list view: 


This is the avv-ay- 

4 


IVc Seated a* avray adapter -to 
bind "the list view -to -the av-v-ay. 

ir 


This is -the list view- 


Drink. 

drinks 

v 

V 

Array 

^Adapter - 

\ 

ListView 


X 

7 

-7 



Now that we’re getting our data from a cursor, we’ll use a 
cursor adapter to bind the data to our list view. A cursor 
adapter is just like an array adapter, except that instead 
of getting its data from an array, it reads the data from a 
cursor: 

The Cursor reads data 

This is the database- -Prom the database- 

•ir ■C 


Our data domes -from a duvsov, 
so well use a dursor adapter 
to bifid it to the List\/iew. 


Database 


Cursor 


Cursor 


ListView 

data 


X 


_ Adapter 


s 


X 7 

X 

-7 


J ) 

X 


We’ll look at this in more detail on the next page. 

List Views and Spinners can use any subclass 
of the Adapter class for their data. This 
includes Array Adapter, Cursor Adapter, and 
SimpleCursor Adapter (a subclass of Cursor Adapter). 
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how simple cursor adapters work 


A simple cursor adapter maps 
cursor data to views 



Create cursor 
Cursor adapter 


We’re going to create a simple cursor adapter, a type of cursor 
adapter that can be used in most cases where you need to display 
cursor data in a list view. It takes columns from a cursor, and maps 
them to text views or image views, for example in a list view. 

In our case, we want to display a list of drink names. We’ll use a 
simple cursor adapter to map the name of each drink returned by 
our cursor to DrinkCategoryActivity’s list view. 

Here’s how it will work: 


o 


The list view asks the adapter for data. 


O 



ListView Simple 

CursorAdapter 

The adapter asks the cursor for data from the database. 



Simple 

CursorAdapter 



Database 


© 


The adapter returns the data to the list view. 

The name of each drink is displayed in the list view as a separate text view. 


Eadh o-p -the 
dvihks is displayed 
in the list view as 
a separate text 
view. 



Let’s construct the simple cursor adapter. 
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How to use a simple cursor adapter 



basic cursors 

Create cursor 
Cursor adapter 


You use a simple cursor adapter in a similar way to how you use an 
array adapter: you initialize the adapter, then attach it to the list view. 

We’re going to create a simple cursor adapter to display a list of drink 
names from the DRINK table. To do this, we’ll create a new instance 
of the SimpleCursorAdapter class, passing in parameters to tell 
the adapter what data to use and how it should be displayed. Finally, 
we’ll assign the adapter to the list view. 


Here’s the code (you’ll add it to DrinkCategoryActivity.java later in the 
chapter): 



is the duvverrt activity- 


SimpleCursorAdapter listAdapter = new SimpleCursorAdapter(this, 


android.R. layout. simple_list_item_l , —This is the same layout we used with 

This is the duvsov. *—^cursor, the array adapter. It displays a single 

new String [] { "NAME" } , <-^ value ^ eadh ' row '» view. 

new int [ ] {android. R. id. textl}, Display the Contents o( the NAME- 
0 ) • Column in the List\/icw te*t views. 


listDrinks . setAdapter (listAdapter ) ; <^Use setAdapterO to £onne*t the adapter to the list view. 


The general form of the SimpleCursorAdapter constructor 

looks like this: Th* ,s is usually the Current activity* 

SimpleCursorAdapter adapter = new SimpleCursorAdapter(Context context. 

How to display 

The Cursor you ereate-.— 

The Cursor should indude 

the_id Column, and the 

data you want to appear. 


int layout, 
"Cursor cursor. 


the data 


String[] fromColumns, 


The context and layout parameters are exactly the same ones 
you used when you created an array adapter: context is the 
current context, and layout says how you want to display the 
data. Instead of saying which array we need to get our data from, 
we need to specify which cursor contains the data. You then use 
fromColumns to specify which columns in the cursor you want to 
use, and to Views to say which views you want to display them in. 

The flags parameter is usually set to 0, which is the default. The 
alternative is to set it to FLAG_REGISTER_CONTENT_OBSERVER 
to register a content observer that will be notified when the content 
changes. We’re not covering this alternative here, as it can lead to 
memory leaks (you’ll see how to deal with changing content in the 
next chapter). 


int[] toViews, 
int flags) 

i- 

Used to determine the 
behavior the Cursor 


l/Vhi£h Columns 
ifi the Cursor bo 
mat^h to whieh 
views 


An 


■y 

ith 


cursor you use 


with a cursor 


adaptei 


MUST include the _id 
column or it won’t work. 
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close the things that you open 


Close the cursor and database 



Create cursor 
Cursor adapter 


When we introduced you to cursors earlier in the chapter, we said 
that you needed to close the cursor and database after you’d finished 
with it in order to release their resources. In our DrinkActivity 
code, we used a cursor to retrieve drink details from the database, and 
once we’d used these values with our views, we immediately closed the 
cursor and database. 


When you use a cursor adapter, (including a simple cursor adapter) it 
works slightly differently; the cursor adapter needs the cursor to stay 
open in case it needs to retrieve more data from it. Let’s look in more 
detail at how cursor adapters work to see why this might happen. 


© 


The list view gets displayed on the screen. 

When the list is first displayed, it will be sized to fit the screen. Let’s say it has space to show 
five items. 


These are the items 
the list view has 
spade to display. 

We re using -five to ^ 
keep things simple, 
but in pradtide its 
likely to be more* 




ListView 


CursorAdapter 


o 


The cursor adapter asks its cursor to read five rows from the database. 

No matter how many rows the database table contains, the cursor only needs to read the 
first five rows. 
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basic cursors 

Create cursor 
Cursor adapter 


Q The user scrolls the list. 

As the user scrolls the list, the adapter asks the cursor to read more rows from the 
database. This works fine if the cursor’s still open. But if the cursor’s already been 
closed, the cursor adapter can’t get any more data from the database. 


The story continues 





the Cursor. 


This means that you can’t immediately close the cursor and 
database once you’ve used the set Adapter () method to connect 
the cursor adapter to your list view. Instead, we’ll close the cursor 
and database in the activity’s onDestroyO method, which gets 
called just before the activity is destroyed. Because the activity’s 
being destroyed, there’s no further need for the cursor or database 
connection to stay open, so they can be closed: 

public void onDestroyO { 
super.onDestroy(); 
cursor.close(); 

db.close () ; e* P.losf the dursor and database 
} when -the activity is destroyed- 

That’s everything you need to know in order to update the code for 
DrinkCategoryActivity, so have a go at the exercise on the 
next page. 
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exercise 



Poo] pi izz}& 


Your job is to take code segments from the 
pool and place them into the blank lines 
in DrinkCategory Activity.]ava. You may 
not use the same code segment more 
than once, and you won't need to use 
all the code segments. Your goal is 
to populate the list view with a list of 
drinks from the database. 


public class DrinkCategoryActivity extends Activity { 


private SQLiteDatabase db; 
private Cursor cursor; 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_drink_category); 


□ 

Starbuzz 

Hfi 

app/src/main 

HB 


java_ 

lo 

com. hfad .starbuzz 



DrinkCategory 

Activity.java 


ListView listDrinks = (ListView) findViewByid(R.id.list_drinks); 


starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 

try { 

db = starbuzzDatabaseHelper. ; 

cursor = db.query("DRINK", 

new String[] { }, 

null, null, null, null, null); 

Note: each segment in 



The Code 

oy \ -the ne*-i page 
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basic cursors 


SimpleCursorAdapter listAdapter = new . (this, 

android.R.layout.simple_list_item_l, 


new String[]{ }, 

new int[]{android.R.id.textl}, 

0 ) ; 

listDrinks.setAdapter(listAdapter); 

} catch( e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT) 
toast.show(); 

} 


//Create the listener 

AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listDrinks, 

View itemView, 
int position, 
long id) { 

//Pass the drink the user clicks on to DrinkActivity 
Intent intent = new Intent(DrinkCategoryActivity.this, 
DrinkActivity.class); 

intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int) id); 
startActivity(intent); 


}; 


□ 

Starbuzz 


HC3 


//Assign the listener to the list view 

listDrinks.setOnltemClickListener(itemClickListener); 


QOverride 

public void onDestroy(){ 
super.onDestroy() ; 

.close (); 

.close (); 


app/src/main 

HD 


java_ 

mu 

com.hfad.starbuzz 



DrinkCategory 

Activity.java 


} 
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solution 



Pda] plizzjc 

Your job is to take code segments from the 
pool and place them into the blank lines 
in DrinkCategory Activity.]ava. You may 
not use the same code segment more 
than once, and you won't need to use 
all the code segments. Your goal is 
to populate the list view with a list of 
drinks from the database. 


public class DrinkCategoryActivity extends Activity { 


private SQLiteDatabase db; 
private Cursor cursor; 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_drink_category); 


□ 

Starbuzz 

Hfi 

app/src/main 

HB 


java_ 

lo 

com. hfad .starbuzz 



DrinkCategory 

Activity.java 


ListView listDrinks = (ListView) findViewByld(R.id.list_drinks); 

You gel a retev-ente to the database using a S<$L.ite0penttelpev-. 

SQLiteppenHelper . starbuzzDatabaseHelper = new StarbuzzDatabaseHelper (this) ; 

try { Were (reading to* the 

db = starbuzzDatabaseHelper. g etRea d a bl e Data ba se () ; database, so we just 

cursor = db. query ("DRINK", need (read-only atdess. 


These tode snippets 
were not needed- 


new String [] { "_i d ", "NAME" 
null, null, null, null, null); 






TV^e tursor must include the _jd and 
Columns. 1A/e want to pass the drink IP to 
DrinkAetWity, and we need to displa y the 
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basic cursors 


yf WeVe using a SimpIcCuv-sov-Adaficv-. 

SimpleCursorAdapter listAdapter = new SimpieCursorAdapt er (this, 
android.R.layout.simple_list_item_l, 

Use the tuv-sov^ ^-- Display the tontenb 

we just tveated- new String [ ] { "NAME" }, of the NAME dolum*- 

new int[]{android.R.id.textl}, 

0 ) ; 

listDrinks.setAdapter(listAdapter); 

} catch ( SQ Li te Except ion ^ e) { l-P the database is unavailable, we'll datdh the S^LiteExdeption- 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT) 
toast.show(); 

} 


//Create the listener 

AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listDrinks, 

View itemView, 
int position, 
long id) { 

//Pass the drink the user clicks on to DrinkActivity 
Intent intent = new Intent(DrinkCategoryActivity.this, 
DrinkActivity.class) ; 

intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int) id); 
startActivity(intent); 


}; 


□ 

Starbuzz 


HC3 


//Assign the listener to the list view 

listDrinks.setOnltemClickListener(itemClickListener); 


@Override 

public void onDestroy(){ 
super.onDestroy() ; 

cu . rsor .. • close < > '• Close -the dursor before you 

db .. close (); t | ose -the database- 


app/src/main 

vs 


java_ 

mu 

com.hfad.starbuzz 



DrinkCategory 

Activity.java 


} 
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DrinkCategoryActivity code 




The revised code for PrinkCategoryActivity 


Create cursor 


Cursor adapter 


Here’s the full code for DrinkCategoryActivity.java, with the array 
adapter replaced by a cursor adapter (the changes are in bold); 
update your code to match ours: 

package com.hfad.starbuzz; 


import android.app.Activity; 
import android.os.Bundle; 
import android.widget.ListView; 
import android.view.View; 
import android.content.Intent; 
import android.widget.AdapterView; 
import android.database.Cursor; 
import android.database.sqlite.SQLiteDatabase; 
import android.database.sqlite.SQLiteException; 
import android.database.sqlite.SQLiteOpenHelper; 
import android.widget.SimpleCursorAdapter; 
import android.widget.Toast; 


□ 

Starbuzz 

nn 

app/src/main 


java 


LQ 


com.hfad.starbuzz 

U 


DrinkCategory 

Activity.java 


Were using -these e*tra classes, 
so you heed b> impor-t "them. 


public class DrinkCategoryActivity extends Activity { 


Ptiv *“ *’ Lit “* t *”“* *9 «Uu, ^ ,« Ue , „ w £kw 

pnvf Cur.or our.or; ^ an* i, „r ^Vcsinf) 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink_category); 

1/VeVe ho longer* 

using ah array \ - 

adapter so 

delete -these ListView listDrinks = (ListView) findViewByld(R.id.list_drinks); 

lines of Code- SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper (this) ; 
try { 

db = starbuzzDatabaseHelper. getReadableDatabase () ; £jet a re-ferende 
cursor = db.query ("DRINK" , to the database, 

new String[]{"_id", "NAME">, 

Create the Cursor. 


null, null, null, null, null); 


The Code eoniinues oh -the ne*i page. ^ 
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The PrinkCategoryActivity code (continued) 


basic cursors 

V| Create cursor 
Cursor adapter 


SimpleCursorAdapter listAdapter = new SimpleCursorAdapter(this, 




Create the Cursor adapter. 


in -the List\/iew. 


android.R.layout.simple list item 1, 

Map the Contents 
of the NAME cursor, 

new int [] {android.R. id. textl}, 

0 ) ; 

listDrinks . setAdapter (listAdapter) ; adap kr ^ UsiVic*. 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT) 

toast.show(); ^ 

} Display a message to the user if a 

£$LiteE*Ception gets thrown. 

//Create a listener to listen for clicks in the list view 
AdapterView.OnltemClickListener itemClickListener = 
new AdapterView.OnltemClickListener(){ 

public void onltemClick(AdapterView<?> listDrinks, 

View itemView, 
int position, 
long id) { 

//Pass the drink the user clicks on to DrinkActivity 
Intent intent = new Intent(DrinkCategoryActivity.this, 
DrinkActivity.class); 

intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int) id); 
startActivity(intent); 


We didn't need to 
dha^e any ©f the 
listener Code- 


} 


//Assign the listener to the list view 

listDrinks.setOnitemClickListener(itemClickListener) 


□ 

Starbuzz 


43 


} 


app/sre/main 

M3 

java 


@Override 

public void onDestroy () { Were dosing the database and Cursor in the 

super. onDes troy () ; activity s onDestroyO method- The Cursor 

cursor. close () ; s t^y °P*n u ntil the Cursor adapter no 

db. close () ; lo^^ev- needs it- 

} 


MB 

com.hfad.starbuzz 

L 0 

DrinkCategory 

Activity.java 


Let’s try running our freshly updated app. 
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test drive 



Test drive the app 

When you run the app, TopLevelActivity gets 
displayed. 


v/ 

-►E7 


Create cursor 
Cursor adapter 


i 

«A Q 2:27 I 

(3 Starbuzz 



Coffee 



Drinks 

Food 

Stores 



When you click on the Drinks item, 
DrinkCategoryActivity is launched. It 
displays all the drinks from the Starbuzz database. 


When you click on one of the drinks, 
DrinkActivity is launched and details of the 
selected drink are displayed. 


The app looks exactly the same as before, but now the 
data is being read from the database. In fact, you can 
now delete the Drink.java code, because we no longer 
need the array of drinks. Every piece of data we need 
is now coming from the database. 
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basic cursors 



Your Android Toolbox 

You’ve got Chapter 16 under 
your belt and now you’ve 
added basic cursors to your 
toolbox. 


You tar. download 
the -Pull tode -fov 
■the thaptev £v-on> 
hU^//t'my>*rUo<*/ 
HeadFirstAndv-oid- 



BULLET POINTS 


■ A cursor lets you read from and write to 
the database. 


Navigate through a cursor using the 

moveTo* () methods. 


■ You create a cursor by calling the 
SQLiteDatabase query () 
method. Behind the scenes, this builds a 
SQL select statement. 


■ Get values from a cursor using the 
get* () methods. Close cursors and 
database connections after you’ve 
finished with them. 


■ The getWritableDatabase() 

method returns a SQLiteDatabase 
object that allows you to read from and 
write to the database. 

■ The getReadableDatabase() 
returns a SQLiteDatabase object. 
This gives you read-only access to 

the database. It may also allow you 
to write to the database, but this isn’t 
guaranteed. 


■ A cursor adapter is an adapter 
that works with cursors. Use 

SimpleCursorAdapter to 

populate a list view with the values 
returned by a cursor. 


you are here ► 


691 










17 cursors and asynctasks 




Staying in the Background 



In most apps, you’ll need your app to update its data. 

So far you’ve seen how to create apps that read data from a SQLite database. But what 
if you want to update the app’s data? In this chapter you’ll see how to get your app to 
respond to user input and update values in the database. You’ll also find out how to 
refresh the data that’s displayed once it’s been updated. Finally, you’ll see how writing 
efficient multithreaded code with AsyncTasks will keep your app speedy. 
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update data 


We want our Starbuzz app to update database data 


In Chapter 16, you learned how to change your app to 
read its data from a SQLite database. You saw how to read 
an individual record (a drink from the Starbuzz data) and 
display that record’s data in an activity. You also learned 
how to populate a list view with database data (in this case 
drink names) using a cursor adapter. 


In both of these scenarios, you only needed to read data 
from the database. But what if you want users to be able to 
update the data? 

We’re going to change the Starbuzz app so that users can 
record which drinks are their favorites. We’ll do this by 
adding a checkbox to DrinkActivity; if it’s checked, it 
means the current drink is one of the user’s favorites: 

Users c,3r\ say whidh drinks are 
their -favorites by dhedking a 
dhedkbox. We need to add this 
dhedkbox to DrinkAdtivity and 
get it to update the database. 


i 

4G j Q 9:24 1 

0 Starbuzz 






Latte 

Espresso and steamed milk 
0 Favorite 


We’ll also add a new list view to TopLevelActivity, 
which contains the user’s favorite drinks: 



i 0 

Q 10:13 m 

0 Starbuzz 



|n the real world, you d 
probably want to use tab 
navigation -for these items. 
We're deliberately keeping 
the app pretty basid i 

bedause we want you to 
-fodus on databases. 



Starbuzz 

Coffee 


jVe'll add a Lis-tView^ Latte 
to lopLevel/idtivity, ' 
whidh dontains the 
user's -favorite drinks. 


Your favorite drinks: 


Cappuccino 


- l/Vhen the user dlidks on 
a drink, it takes them 
to that drink's details 
in DrinkActivity* 
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cursors and asynctasks 


We'll update PrinkActivity first 

In Chapter 15, we added a FAVORITE column to the DRINK 
table in the Starbuzz database. We’ll use this column to let users 
indicate whether a particular drink is one of their favorites. We’ll 
display its value in the new checkbox we’re going to add to 
DrinkActivity, and when the user clicks on the checkbox, 
we’ll update the FAVORITE column with the new value. 

Here are the steps we’ll go through to update DrinkActivity: 


o 


Update DrinkActivity's layout to add a checkbox and text label. 



We'll 

label 


add -this checkbox and —X 
■fco aC‘tivi‘ty_d(rink.Xrw|. ' 


_atte 

Espresso and steamed milk 
0 Favorite 



o Display the value of the FAVORITE column in the checkbox. 

To do this, we’ll need to retrieve the value of the FAVORITE column 
from the Starbuzz database. 


G 


Let’s get started. 


Update the FAVORITE column when the checkbox is clicked. 

We’ll update the FAVORITE column with the value of the checkbox so 
that the data in the database stays up to date. i 


r 


V 

jjo -to? 


We’re going to update the 
Starbuzz app in this chapter, 
so open your Starbuzz 
project in Android Studio. 
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add favorites 


Update layout 
Show favorite 
Update favorite 


Add a checkbox to PrinkActivity's layout 


We’ll start by adding a new checkbox to DrinkActivity’s layout to 
indicate whether the current drink is one of the user’s favorites. We’re 
using a checkbox, as it’s an easy way to display true/false values. 

First, add a String resource called "favorite" to strings.xml (we’ll 
use this as a label for the checkbox): 

<string name="favorite">Favorite</string> 


Then add the checkbox to activity_drink.xml. We’ll give the checkbox an 
ID of favorite so that we can refer to it in our activity code. We’ll also 
set its android: onClick attribute to "onFavoriteClicked" 
so that it calls the onFavoriteClicked () method in 
DrinkActivity when the user clicks on the checkbox. Here’s the 
layout code; update your code to reflect our changes (they’re in bold): 


□ 

Starbuzz 

4T3 

app/src/main 

res 



strings.xml 


<LinearLayout ... > 

<ImageView 

android:id="@+id/photo" 
android:layout_width="190dp" 
android:layout height="190dp" /> 


These are 
-the photo, 

description 
views we 
added when 
we -f irst 
created the 
activity. 

^ CTextView 

android:id="@+id/description" 
android:layout_width="match_parent" 
android:layout_height="wrap_content 


CTextView 

android:id="@+id/name" 

android:layout_width="wrap_content" 

android:layout height="wrap content" 


/> 


/> 


a 

Starbuzz 

HB 

app/src/main 

LQ 

activity_drink.xml 



<CheckBox android:id="@+id/favorite" 


The dhedkbo* has a« IP ot -favorite- 


android:layout_width="wrap_content" 
android:layout_height="wrap_content" 

android: text="@string/favorite" C-- WeVe jivmj the dhedkbox a label- 

android: onClick="onFavoriteClicked" /> ^—| Me* the dhedkbo* is dlidked, 
</LinearLayout> ihe onFavov-iteClidkedO method 

m PlrinkAdtivi-ty will get dalled- 

Next we’ll change the DrinkActivity code to get the checkbox |/Ve need to write this method- 
to reflect the value of the FAVORITE column from the database. 
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display the value of the FAVORITE column 



cursors and asynctasks 

Update layout 
Show favorite 
Update favorite 


In order to update the checkbox, we first need to retrieve the 
value of the FAVORITE column from the database. We can do 
this by updating the cursor we’re using in DrinkActivity’s 
onCreate () method to read drink values from the database. 

Here’s the cursor we’re currently using to return data for the drink 
the user has selected: 

Cursor cursor = db.query("DRINK", 


□ 

Starbuzz 

43 

app/src/main 

HH 

java_ 


new String[]{"NAME", "DESCRIPTION", "IMAGE_RESOURCE_ID"} , 
"_id = ?", 


com. hfad .starbuzz 



new String[]{Integer.toString(drinkld)}, 


DrinkActivity.java 


null, null, null); 


To include the FAVORITE column in the data that’s returned, we 
simply add it to the array of column names returned by the cursor: 


Add the FfyVORlTB 

Column io -the duv-sov- 


Cursor cursor = db.query("DRINK", 

new String[]{"NAME", "DESCRIPTION", 
"_id = ?", 


Ir 

"IMAGE_RESOURCE_ID", "FAVORITE"}, 


new String [ ] {Integer . toString (drinkld) }, y ou Jont update youv 

null, null, null) ; version o-f the dode yet- We'll si 

you -tbc -full set o-f dha^es -for 

Once we have the value of the FAVORITE column, we can update iVir^Adtivityjava soon, 

the favorite checkbox accordingly. To get this value, we first 
navigate to the first (and only) record in the cursor using: 


cursor.moveToFirst (); 


We can then get the value of the column for the current drink. The 
FAVORITE column contains numeric values, where 0 is false 
and 1 is true. We want the favorite checkbox to be ticked if the 
value is 1 (true), and unticked if the value is 0 (false), so we’ll use the 
following code to update the checkbox: 

boolean isFavorite = (cursor.getlnt(3) == 1); 


£jet the value o-f *the FAVORITE 
doluvnft' It's stov-ed m *the database 
as I *fov true, O -for -false. 


CheckBox favorite = (CheckBox) findViewById(R.id.favorite); 
favorite.setChecked(isFavorite); 

Set the value ot the 

That’s all the code we need to reflect the value of the FAVORITE 
column in the favorite checkbox. Next, we need to get the 
checkbox to respond to clicks so that it updates the database when 
its value changes. 
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Respond to clicks to update the database 

When we added the favorite checkbox to activity_drink.xml , we 
set its android: onClick attribute to onFavoriteClicked (). 
This means that whenever the user clicks on the checkbox, the 
onFavoriteClicked () method in the activity will get called. 

We’ll use this method to update the database with the current value 
of the checkbox. If the user checks or unchecks the checkbox, the 
onFavoriteClicked () method will save the user’s change to 
the database. 



Update layout 
Show favorite 
Update favorite 


In Chapter 15, you saw how to use SQLiteDatabase methods to 
change the data held in a SQLite database: the insert () method 
to insert data, the delete () method to delete data, and the 
update () method to update existing records. 

You can use these methods to change data from within your activity. 

As an example, you could use the insert () method to add new 
drink records to the DRINK table, or the delete () method to 
delete them. In our case, we want to update the DRINK table’s 
FAVORITE column with the value of the checkbox using the 
update () method. 

As a reminder, the update () method looks like this: 

4^—- The -table whose data you wanl to update 

db.update(String table, _ 

/UC The new values 

ContentValues values, 

String conditionClause, ^ileria tor update the data 

String[] conditionArguments); j 


where table is the name of the table you want to update, and 
values is a ContentValues object containing name/value pairs 
of the columns you want to update and the values you want to set 
them to. The conditionClause and conditionArguments 
parameters lets you specify which records you want to update. 

You already know everything you need to get DrinkActivity 
to update the FAVORITE column for the current drink when the 
checkbox is clicked, so have a go at the following exercise. 


DrinkActivity 



Starbuzz 

database 
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Code Magnets 

In our code for DrinkActivity we want to update the FAVORITE 
column in the database with the value of the favorite checkbox. 

Can you construct the onFavoriteClicked () method so that it 
will do that? 

public class DrinkActivity extends Activity { 

//Update the database when the checkbox is clicked 

public void onFavoriteClicked( ){ 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 

CheckBox favorite = (CheckBox) findViewByld(R.id.favorite) ; 

drinkValues = new ; 

drinkValues.put( , favorite.isChecked()); 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper. ; 

db.update( , , 



, new String[] {Integer.toString(drinkld)}); 


db.close (); 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT); 
toast.show(); 
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magnets solution 



Code Magnets Solution 

In our code for DrinkActivity we want to update the FAVORITE 
column in the database with the value of the favorite checkbox. 
Can you construct the onFavoriteClicked () method so that it 
will do that? 


public class DrinkActivity extends Activity { 


//Update the database when the checkbox is clicked 


public void onFavoriteClicked( I View view 


int drinkld = (Integer) getlntent () .getExtras() .get(EXTRA_DRINKID); 
CheckBox favorite = (CheckBox) findViewByld(R.id.favorite); 


ContentValue s 


drinkValues = new 


ContentValues() 1 ; 


drinkValues.put( 


"FAVORITE" 1 , favorite.isChecked()) ; 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper. | 9 e tWritableDatabase() |; 

-"T- 1 

We need read/write attess to 
■the database to update it- 

" id = ?" I' new String[] {Integer.toString(drinkld)}) 

db.close (); 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT) 
toast.show(); 


db.update( 


"DRINK" 


drinkValues 


} 
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The full PrinkActivitY-java code 

We’ve now done everything we need to change DrinkActivity 
so that it reflects the contents of the FAVORITE column in the 
favorite checkbox. It then updates the value of the column in 
the database if the user changes the value of the checkbox. 

Here’s the full code for DrinkActivity.java, so update your version of 
the code so that it reflects ours (our changes are in bold): 




Update layout 
Show favorite 
Update favorite 


package com.hfad.starbuzz; 


□ 

Starbuzz 


import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 


android.app.Activity; 
android.os.Bundle ; 
android.widget.ImageView; 
android.widget.TextView; 
android.widget.Toast; 
android, database . Cursori- 
android, database .sqlite.SQLiteDatabase; 
android.database.sqlite.SQLiteException; 
android.database.sqlite.SQLiteOpenHelper; 
android.view.View; 
android.widget.CheckBox; 
android.content.ContentValues; 


4a 

app/src/main 

java 


La 

com. hfad .starbuzz 

L @ 

DrinkActivity.java 


WeVe using -these extra classes, 

so you need to iw»fovt them- 


public class DrinkActivity extends Activity { 


public static final String EXTRA_DRINKID = "drinkld"; 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink); 

//Get the drink from the intent 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 

The toAt doh-tihues ^ 
oh the next page. 
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code, continued 


PrinkActivity-java (continued) 



Update layout 
Show favorite 
Update favorite 


//Create a cursor 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 


SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 

Cursor cursor = db.query("DRINK", 

new String[]{"NAME", "DESCRIPTION ", "IMAGE RESOURCE ID" , "FAVORITE "}, 

r 

Mi tke FAVORITE 


"_id = ?", 

new String[]{Integer.toString(drinkld)}, 
null, null, null); 


^olurwh to -the £u\rsoV~. 


□ 


Starbuzz 


4B 

app/src/main 

K3 


//Move to the first record in the Cursor 
if (cursor.moveToFirst()) { 

//Get the drink details from the cursor 
String nameText = cursor.getString (0); 

String descriptionText = cursor.getString(1); 
int photold = cursor.getlnt(2); 
boolean isFavorite = (cursor.getlnt(3) == 1); 

^ If the FAVORITE colu has a value 

//Populate the drink name of I, -this indicates a true value- 

TextView name = (TextView) findViewByld(R.id.name); 
name.setText(nameText); 


java 


La 


com. hfad .starbuzz 

U 


DrinkActivity.java 


//Populate the drink description 

TextView description = (TextView) findViewByld(R.id.description); 
description.setText(descriptionText); 


} 


//Populate the drink image 

ImageView photo = (ImageView) findViewByld(R.id.photo); 
photo.setlmageResource(photold); 
photo.setContentDescription(nameText); 


//Populate the favorite checkbox 




|f -the drink is a favorite, put a 
Checkmark m the -favorite checkbox 


CheckBox favorite = (CheckBox)findViewByld(R.id.favorite); 


favorite.setChecked(isFavorite); 


The Code £ontmues 
on -the nex-1 paje- 
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cursors and asynctasks 

Update layout 
Show favorite 
Update favorite 


cursor.close (); 
db.close (); 

} catch (SQLiteException e) { 

Toast toast = Toast.makeText(this, 
"Database unavailable". 
Toast.LENGTH_SHORT); 
toast.show(); 

} 

} 


□ 

Starbuzz 

TD 

app/src/main 

HB 


java_ 

MT3 


com. hfad .starbuzz 



DrinkActivity.java 


//Update the database when the checkbox is clicked 
public void onFavoriteClicked(View view){ 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 


} 


//Get the value of the checkbox 

CheckBox favorite = (CheckBox) findViewByld(R.id.favorite); 

ContentValues drinkValues = new ContentValues () ; vdWt o-P the -Pavov-ite 

drinkValues. put ("FAVORITE", favorite. isChecked()) ; — dhedkbo* -to tbe dv-'mk\/alues 

CoftteirtValwes object- 

//Get a reference to the database and update the FAVORITE column 
SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getWritableDatabase(); 

Update -the dv-ink ; s FAVORITB 
dolurhh in the database to the 
value o-P the eheekbo*. 

db. close () ; 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT) 
toast.show(); ^ 

j Display a r^essa^c i-P theves a 

problem with the database. 



Let’s check what happens when we run the app. 
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test drive 

Update layout 
Show favorite 
Update favorite 

When we run the app and navigate to a drink, the new 
favorite checkbox is displayed (unchecked): 


Test drive the app 


-►v 



tteve's -the « ew checkbox 
we added wi-th i-ts label- • 


When we click on the checkbox, a checkmark appears to 
indicate that the drink is one of our favorites: 


A 

K j Q 9:24 1 

0 Starbuzz 




Me* we dkk on i he dhetkbo*, a 
dhedk^ark appears, and -the value 
^c*ts written *to *the database- —- 


Latte 

Espresso and steamed milk 
0 Favorite 



When we close the app and navigate back to the drink, the checkmark 
remains. The value of the checkbox has been written to the database. 

That’s everything we need to display the value of the FAVORITE column 
from the database, and update the database with any changes to it. 
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Pisplay favorites in TopLevel Activity 

The next thing we need to do is display the user’s favorite drinks in 
TopLevelActivity. Here are the steps we’ll go through to do 
this: 


o 

© 


Add a list view and text view to TopLevel Activity's layout. 

Populate the list view and get it to respond to clicks. 

We’ll create a new cursor that retrieves the user’s favorite drinks from 
the database, and attach it to the list view using a cursor adapter. 

We’ll then create an onltemClickListener so that we can get 
TopLevelActivity to start DrinkActivity when the user clicks 
on one of the drinks. 


© 


Refresh the list view data when we choose a new favorite 
drink. 

If we choose a new favorite drink in DrinkActivity, we want it to 
be displayed in TopLevelActivity’s list view when we navigate 
back to it. 


Applying all of these changes will enable us to display 
the user’s favorite drinks in TopLevelActivity. 


Starbuzz 

database 


The -favorites list view will 
jet its data -fr or* the 
database using a dursor. 



We’ll go through these steps over the next few pages. 


fl a 

Starbuzz 

Q 9:42 

Starfcuzz 

MT Coffee 


i □ 

(3 Starbuzz 


Drinks 

Food 

Stores 

Your favorite drinks: 

Latte- 



l/Vhen you dlidk 
on a drink in the 
-favorites list view, 
Drink/tativity will 
start, displaying 
details o( the 
drink. 


atte 

Espresso and steamed milk 
[Vf Favorite 












display favorites 


display the favorite drinks in activitY_top_level.xml 


As we said on the previous page, we’re going to add a list view 
to activity_top_level.xml, which we’ll use to display a list of the 
user’s favorite drinks. We’ll also add a text view to display a 
heading for the list. 

First, add the following String resource to strings.xml (we’ll use 
this for the text view’s text): 


□ 

Starbuzz 

4B 

app/src/main 

Ktai 


<string name="favorites">Your favorite drinks:</string> 

Next, we’ll add the new text view and list view to the layout. 

Here’s our code for activity_top_lev el. xml\ update your version of 
the code to match our changes: 


es _ 

L H 


values 



strings.xml 


CLinearLayout ... > 
cimageView 

android:layout_width="2OOdp" 
android:layout_height="lOOdp" 
android:src="Qdrawable/starbuzz_logo" 

android:contentDescription="@string/starbuzz_logo" /> 


CListView 

android:id="@+id/list_options 
android:layout_width= n match_parent" 
android:layout_height="wrap_content" 
android:entries="@array/options" /> 



The layout already 
Contains the Starbuzz. 
logo and list view. 


□ 

Starbuzz 

HH 
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layout 



;tView ^ We'll add a te*t view -to display; J*e top je V ^ ml 

android:layout_width="wrap_content" tc%t "Your -favorite drinks. Well put 

android:layout_height= "wrap_content" ^is * m 3 String called -favorites, 
android:textAppearance="?android:attr/textAppearanceLarge" 
android:text="@string/favorites" /> 


<ListView 

android:id="@+id/list_favorites" ^- The list_favorites 

android:layout_width="match_j?arent" List\/iew will display the 

android:layout_height="wrap_content" /> users -favorite drinks. 

</LinearLayout> 

Those are all the changes we need to make to activity_top_level.xml. 

Next, we’ll update TopLevelActivity.java. 
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Refactor Toplevel Activity .java 

Before we write any code for our new list view, we’re going to refactor 
our existing TopLevelActivity code. This will make the code a 
lot easier to read later on. We’ll move the code relating to the options 
list view into a new method called setupOptionsListView () . 
We’ll then call this method from the onCreate () method. 

Here’s our code for TopLevelActivity.java (update your version of the 
code to reflect our changes). 


v/ 


Update layout 
Populate list view 
Refresh data 


package com.hfad.starbuzz; 


public class TopLevelActivity extends Activity { 


□ 

Starbuzz 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_top_level); 

setupOptionsListView () ; „ eNW sef>f0fWsList\/iewO n>elhod 


413 

app/src/main 


java 


AH o£ this 
Lo&t was 
i * the 
ohCreateO 
method- 
WeVe putting 
it ih a hew 
method to 
■*ake the 
Lodt tidier 


m 3 

com.hfad.starbuzz 

L i 

TopLevel 

Activity.java 

private void setupOptionsListView() { 

7/Create an OnltemClickListener 

AdapterView.OnltemClickListener itemClickListener = 

new AdapterView.OnltemClickListener(){ 
public void onltemClick(AdapterView<?> listView, 

View itemView, 
int position, 
long id) { 

if (position == 0) { 

Intent intent = new Intent(TopLevelActivity.this, 

DrinkCategoryActivity.class); 

startActivity(intent); 

^ It the Drihk optiOh 
ih the list_optiohS list 
view is disked, start 
Pv-ihkCatejov-yA^tivity. 


} 


} 


}; 


//Add the listener to the list view 
ListView listView = (ListView) findViewByld(R.id.list_options); 
listView.setOnltemClickListener(itemClickListener); 
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TopLevelActivity changes 


What changes are needed for 
T oplevel Activityjava 

We need to display the user’s favorite drinks in the list_ 
favorites list view we added to the layout, and get it to 
respond to clicks. To do this, we need to do the following: 



Update layout 
Populate list view 
Refresh data 


O 


Populate the list_favorites list view using a cursor. 

The cursor will return all drinks where the FAVORITE column has 
been set to 1—all drinks that the user has flagged as being a favorite. 
Just as we did in our code for DrinkCategoryActivity, we can 
connect the cursor to the list view using a cursor adapter. 



Database 


o 


Create an onltemClickListener so that the list_favorites 
list view can respond to clicks. 

If the user clicks on one of their favorite drinks, we can create an 
intent that starts DrinkActivity, passing it the ID of the drink 
that was clicked. This will show the user details of the drink they’ve 
just chosen. 


O Intent 

\ 

drinkld yr 

TopLevelActivity DrinkActivity 


You’ve already seen all the code that’s needed to do this. In fact, 
it’s almost identical to the code we wrote in earlier chapters to 
control the list of drinks in DrinkCategoryActivity. The 
only difference is that this time, we only want to display drinks 
with a value of 1 in the FAVORITE column. 

We’ve decided to put the code that controls a list view in a 
new method called setupFavoritesListView () . We’ll 
show you this method on the next page before adding it to 
TopLevelA ctivity.ja va . 
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The setupFavoritesListView() 
method populates the list_favorites 
list view with the names of the user's 
favorite drinks. Make sure you understand 
the code below before turning the page. 



cursors and asynctasks 

Update layout 
Populate list view 
Refresh data 


£jei the list__£avovites 
list view- 

ListView listFavorites = (ListView) findViewByld(R.id.list favorites); 


private void setupFavoritesListView() { 

//Populate the list_favorites ListView from a cursor 


try { 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
db = starbuzzDatabaseHelper.getReadableDatabase(); 
favoritesCursor = db.query("DRINK", 

^ new String[] { "_id", "NAME"}, 

Cvea-te a duvsov -that "favorite = i",<-1/ , i, , „ r i. 

5 «ts the values of the " a "f 7 t 

Jd and mm doUns nUl1 ' nUl1 ' nUl1 ' nUll); usev s favovite dvinks. 

wheve FAVORITS-I. 


U 

Starbuzz 


CursorAdapter favoriteAdapter 

Create a new 
Cursor adapter. 


Ha 

app/sre/main 

java 


new SimpleCursorAdapter(TopLevelActivity.this, 
Use the android.R.layout.simple_list_item_l, 


Cursor in favoritesCursor, 

the Cursor new String [ ] { "NAME" } ~ 

adapter. 

new int[]{android.R.id.textl}, 0); 


Display the names of the 
drinks in the list view- 


na 

com. hfad .starbuzz 

L @ 

TopLevel 

Activity.java 


listFavorites.setAdapter(favoriteAdapter); 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH SHORT); 


toast.show(); 


Display a message i*f there^s a problem with the database- 


//Navigate to DrinkActivity if a drink is clicked 

listFavorites.setOnltemClickListener(new AdapterView.OnltemClickListener() { 

@Override 


This will get 
tailed it an 
item in the 
list view is 

clicked- } 

}) ; 

} 


public void onltemClick(AdapterView<?> listView, View v, int position, long id) { 


Intent intent = new Intent(TopLevelActivity.this, DrinkActivity.class); 
intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int)id); 
startActivity(intent); ^ 

|f -the usev dlidks on one of ihe >te»s 
in 
inf 


-the list_favovites list view, dveate an 
■ntent to sUvt PvinkAdtivity, indluding 
the IP of the dvink as e*tva infovmat«on. 
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TopLevelActivity code 


The new TopLevelActivity .java code 

We’ve updated TopLevelActivity to populate the 
list_f avorites list view and make it respond to clicks. 
Update your version of TopLevelActivity.java to match ours 
(there’s a lot of new code, so go through it carefully and 
take your time): 



Update layout 
Populate list view 
Refresh data 


package com.hfad.starbuzz; 

import android.app.Activity; 
import android.os.Bundle; 
import android.content.Intent; 
import android.widget.AdapterView; 
import android.widget.ListView; 
import android.view.View; 
import android.database.Cursor; 
import android.database.sqlite.SQLiteOpenHelper; 
import android.database.sqlite.SQLiteException; 
import android.database.sqlite.SQLiteDatabase; 
import android.widget.SimpleCursorAdapter; 
import android.widget.CursorAdapter; 
import android.widget.Toast; 


□ 

Starbuzz 


K3 

app/src/main 

mi 

java 


lo 

com. hfad .starbuzz 

L @ 

TopLevel 

Activity.java 


WeVe using all -these 
extv-a classes, so we 
need -to impov-t -them. 


public class TopLevelActivity extends Activity { 

We Ye adding -the database and duv-sov as pv-ivate 

private SQLiteDatabase db; ^ ^ — variables so that we dan addess them in the 

. _ _ . . _ N setUpFavovitesListViewO and onDestroyO methods, 

private Cursor favoritesCursor; j » 1 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_top_level); 
setupOptionsListView(); 

setupFavoritesListview () . ^ 

! method -from the onCveateO method- 


The dode dontinues 
on the next page- 
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The ToplevelActivity.java code (continued) 
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Update layout 
Populate list view 
Refresh data 


Wit don’t need to change this method- 

private void setupOptionsListView() { 

//Create an OnltemClickListener 

AdapterView.OnltemClickListener itemClickListener = 

new AdapterView.OnltemClickListener() { 
public void onltemClick(AdapterView<?> listView, 

View itemView, 
int position, 
long id) { 

if (position == 0) { 

Intent intent = new Intent(TopLevelActivity.this, 

DrinkCategoryActivity.class); 

startActivity(intent) ; 


} 


} ; 


//Add the listener to the list view 

ListView listView = (ListView) findViewByld(R.id.list_options); 
listView.setOnltemClickListener(itemClickListener); 

This is the method we treated to 
populate the list_favov-ites list 


□ 

Starbuzz 

4a 

app/sre/main 

La 


wr- 


view and make it respond to elifcks. 


java_ 

4T3 

com. hfad. starbuzz 

L g 

TopLevel 

Activity.java 


private void setupFavoritesListView () { 

//Populate the list_favorites ListView from a cursor 

ListView listFavorites = (ListView) findViewByld(R.id.list_favorites); 
try{ 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 

db = starbuzzDatabaseHelper. getReadableDatabase () 3 re-Perende to the database 

favoritesCursor = db.query("DRINK", 

new String[] { "_id", "NAME"}, 

The lis-t__Lvov-i-tes "favorite = l", 

list view will use this 
Cursor -for its data- 


null, null, null, null); 


The £ode Continues 
on the ne*t page- 
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code, continued 




Update layout 
Populate list view 
Refresh data 


The TopLevelActivity.java code (continued) 

CursorAdapter favoriteAdapter = 

Use the duvsov- ii new SimpleCursorAdapter(TopLevelActivity.this, 

d fcuvsov adaptev-. android. R. layout. simple_list_i tem__l, 

favoritesCursor, 

new String[]{"NAME"}, 

new int[]{android.R.id.textl}, 0) ; 

listFavorites. setAdapter (favoriteAdapter) ; Set "the £uv-sev- adap”tev bo -the lis-i view. 

} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable". Toast.LENGTH_SHORT); 

toast.show(); 


} 


£jei *tV\e 11s-t_-favov-i-tes lis-t 
- view bo respond bo dlidks. 


//Navigate to DrinkActivity if a drink is clicked 
listFavorites.setOnltemClickListener(new AdapterView.OnltemClickListener() { 

@Override 

public void onltemClick(AdapterView<?> listView, View v, int position, long id) { 
Intent intent = new Intent(TopLevelActivity.this, DrinkActivity.class); 
intent.putExtra(DrinkActivity.EXTRA_DRINKID, (int)id); 

startActivity(intent) 


} 


}) 


S-ta\rt DrinkActivity, 
passing it the IV o+ the 
dv-'mk that was clicked on. 


//Close the cursor and database in the onDestroyO method 
@Override 

public void onDestroy () { \ . ^ ^ a , tlVl ty is de stroy e d. 

super. onDestroy () ; ^ We'll close the Cursor and database in 

favoritesCursor. close () ; ) this method, 3 s we wo longer need them 
db. close () _-— ^ i-f the activity’s being destroyed 

) 


□ 

Starbuzz 

4H 

app/sre/main 

HH 


java_ 

a 

com. hfad. starbuzz 

L @ 

TopLevel 

Activity.java 


The above code populates the list_ favorites list view with 
the user’s favorite drinks. When the user clicks on one of these 
drinks, an intent starts DrinkActivity and passes it the ID of 
the drink. Let’s take the app for a test drive and see what happens. 
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Test drive the app 



cursors and asynctasks 

Update layout 
Populate list view 
Refresh data 


When you run the app, the new text view and list_f avorites list 
view are displayed in TopLevelActivity. If you’ve marked a drink 
as being a favorite, it appears in the list view. 


If you click on that drink, DrinkActivity starts and details of the 
drink are displayed. 



Here's -the new 
1 1 s-t_-Pavov-i-tes list view 
we Seated. It displays 
a latte, as we marked 

this as a -favorite_ 

drink earlier in the 
chapter. 


5+arfeuzz 

Coffee 

Drinks 

Food 

Stores 

Your favorite drinks: 

Latte 



^atte 

Espresso and steamed milk ! 
[vf Favorite 


1/Yher\ we fclidk 
■ OY\ the drink, 
its details are 
displayed- 


But there’s a problem. If you select a new drink as being a 
favorite, when you go back to TopLevelActivity the list_ 
favorites list view doesn’t include the new drink. The new drink 
is only included in the list view if you rotate the device. 




:appuccino 

Espresso, hot milk and steamed-milk foam 

[vf Favorite 
/K 

^ l/Ve've marked a eappueeino 
as a -favorite, but its hot 
appearing in the list view. 


Starfeu 

’ Coffee 


izzr 


Drinks 

Food 

Stores 

Your favorite drinks: 

Latte 


izr 

arCoffee 

Drinks 

Food 

Stores 

Your favorite drinks: 

Latte 

Cappuccino 


When we rotate the 
device, the dappuddino 
■ appears in the list view- 
Why’s that? 


Why do you think the new drink we chose as a favorite doesn’t 
appear in the list view until we rotate the device? Give this 
some thought before turning the page. 
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out-of-date data 


Cursors don't automatically refresh 

If the user chooses a new favorite drink by navigating through 
the app to DrinkActivity, the new favorite drink isn’t 
automatically displayed in the list_f avorites list view in 
TopLevelActivity. This is because cursors retrieve data 
when the cursor gets created. 

In our case, the cursor is created in the activity onCreate () 
method, so it gets its data when the activity is created. When the 
user navigates through the other activities, TopLevelActivity is 
stopped. It’s not destroyed and recreated, so neither is the cursor. 



Update layout 
Populate list view 
Refresh data 



Starfouzz 
®f Coffee 

Drinks 

Food 

Stores 

Your favorite drinks: 
Latte 



Latte 

Espresso and steamed milk 
[Vf Favorite 


Vi\\tf\ you start a sedohd ac-tivi-by, 
the sedottd activity is stacked 
or\ top o-f the -first- The -f irst 
activity isn’t destroyed- Instead, 
it’s paused and then stopped, as 
it loses the -fodus and stops bein^ 
visible to the user- 


Cursors don’t automatically keep track of whether the underlying 
data in the database has changed. So if the underlying data changes 
after the cursor’s been created, the cursor doesn’t get updated: it still 
contains the original records, and none of the changes. That means 
that if the user marks a new drink as being a favorite after the cursor 
is created, the cursor will be out of date. 


l-f you update the data 
m the database- Unor 


h't 


id 

NAME 

DESCRIPTION 

IMAGE RESOURCE ID 

FAflORITE 

see the hew t 
the Cursor’s a 
beeh Seated- 

1 

“Latte” 


"Espresso and steamed milk" 

54543543 


2 

“Cappucc 

id 

NAME 

DESCRIPTION 

IMAGE RESOURCE ID 

FAVORITE 


“Filter” 

1 

“Latte” 

"Espresso and steamed milk" 

54543543 


0 - 

3 

2 

“Cappuccino” 

"Espresso, hot milk and 
steamed-milk foam" 

654334453 


0 






3 

“Filter” 

"Our hest drip coffee" 

44324234 


0 


So how do we get around this? 
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Change the cursor with changeCursort) 

The solution is to change the underlying cursor used by the 1 i s t_ 
favorites list view to an updated version. To do this, you define a new 
version of the cursor, get a reference to the list view’s cursor adapter, and 
then call the cursor adapter’s changeCursor () method to change the 
cursor. Here are the details: 

1. define the cursor 

You define the cursor in exactly the same way as you did before. In our case, 
we want the query to return the user’s favorite drinks, so we use: 

Cursor newCursor = db.query("DRINK", 

y* new String [] { " id", "NAME 

This IS -the same <\uery ^ ^ _ 

that v/e had beW "favorite = l", 

null, null, null, null); 

Z. fret a reference to the cursor adapter 

You get a reference to the list view’s cursor adapter by calling the list view’s 
get Adapter () method. This method returns an object of type Adapter. 

As our list view is using a cursor adapter, we can cast the adapter to a 
Cursor Adapter: 

ListView listFavorites = (ListView) findViewByld(R.id.list_favorites); 

CursorAdapter adapter = (CursorAdapter) listFavorites.getAdapter(); 

3. Change the cursor using changeCursor!) 

You change the cursor used by the cursor adapter by calling its 
changeCursor () method. This method takes one parameter, the new 
cursor: 


v 

V 


Update layout 
Populate list view 
Refresh data 


adapter. changeCursor (newCursor) ; Change Ihe du\rsor used by the Cursor adapter to the new one- 

The changeCursor () method replaces the cursor adapter’s current cursor 
with the new one. It then closes the old cursor, so you don’t need to do this 
yourself. 

We’re going to change the cursor used by the list_f avorites list view in 
TopLevelActivity’s onRestart () method. This means that the data in 
the list view will get refreshed when the user returns to TopLevelActivity. 

Any new favorite drinks the user has chosen will be displayed, and any drinks 
that are no longer flagged as favorites will be removed from the list. 

We’ll show you the full code for TopLevelActivity.java over the next few pages. 
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code, continued 


The revised TopLevel Activity .java code 

Here’s the full TopLevelActivity.java code; update your code to 
reflect our changes (in bold). 



Update layout 
Populate list view 
Refresh data 


package com.hfad.starbuzz; 

import android.app.Activity; 
import android.os.Bundle; 
import android.content.Intent; 
import android.widget.AdapterView; 
import android.widget.ListView; 
import android.view.View; 
import android, database . Cursori- 

import android.database.sqlite.SQLiteOpenHelper; 
import android.database.sqlite.SQLiteException; 
import android.database.sqlite.SQLiteDatabase; 
import android.widget.SimpleCursorAdapter; 
import android.widget.CursorAdapter; 
import android.widget.Toast; 

public class TopLevelActivity extends Activity { 


□ 

uzz 

H3 


Starbuzz 


app/src/main 

KZJ 

java_ 

4Z3 

com. hfad. starbuzz 

u 


TopLevel 

Activity.java 


You don't need to change any 
o£ the Code on this ya^e 


private SQLiteDatabase db; 
private Cursor favoritesCursor; 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_top_level); 
setupOptionsListView(); 
setupFavoritesListView(); 


The Code dorrtmues 
on -the nex-t page- 
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cursors and asynctasks 

Update layout 
Populate list view 
Refresh data 


private void setupOptionsListView() { 

//Create an OnltemClickListener 

AdapterView.OnltemClickListener itemClickListener = 

new AdapterView.OnltemClickListener() { 
public void onltemClick(AdapterView<?> listView, 

View itemView, /ou do*i h ccd -to 

int position, £ha*ge a*y o-p the 

long id) { Lode ok this page. 

if (position == 0) { 

Intent intent = new Intent(TopLevelActivity.this, 

DrinkCategoryActivity.class); 


}; 


startActivity(intent); 


//Add the listener to the list view 

ListView listView = (ListView) findViewByld(R.id.list 
listView.setOnltemClickListener(itemClickListener); 


□ 

Starbuzz 

KT3 

app/sre/main 

MB 


options); 


java_ 


com. hfad. starbuzz 



private void setupFavoritesListView() { 

//Populate the list_favorites ListView from a cursor 

ListView listFavorites = (ListView) findViewByld(R.id.list_favorites); 
try { 


TopLevel 

Activity.java 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
db = starbuzzDatabaseHelper.getReadableDatabase(); 
favoritesCursor = db.query("DRINK", 

new String[] { "_id", "NAME"}, 

"FAVORITE = 1", 


null, null, null, null); 


CursorAdapter favoriteAdapter = 

new SimpleCursorAdapter(TopLevelActivity.this, 
android.R.layout.simple_list_item_l, 
favoritesCursor, 
new String[]{"NAME"}, 

new int [ ] { android. R . id. textl }, 0 ) ; The Lode £oK”liKues 

listFavorites . setAdapter (favoriteAdapter) ; ° h nex-t page- 
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more code 


The Toplevel Activity.java code (continued) 




Update layout 
Populate list view 
Refresh data 


} catch(SQLiteException e) { 

Toast toast = Toast.makeText(this, "Database unavailable", Toast.LENGTH_SHORT); 
toast.show(); 

} 


//Navigate to DrinkActivity if a drink is clicked 

listFavorites.setOnltemClickListener(new AdapterView.OnltemClickListener() { 

QOverride 

public void onltemClick(AdapterView<?> listView, View v, int position, long id) { 
Intent intent = new Intent(TopLevelActivity.this, DrinkActivity.classi- 
intent . putExtra (DrinkActivity . EXTRA_DRINKID, (int)id); 
startActivity(intent); 


}) ; 


@Override 
public void onRestart() { 
super.onRestart(); 

Cursor newCursor = db.query("DRINK 


Add the onRestartO method- This will jet tailed 
when the use*- navigates batk to TopLevelAttivity- 


□ 

IUZZ 

K3 


Starbuzz 




Cv-eate a new version o-f the tuv-so*-. 


"NAME"}, 


app/sre/main 

MB 

java 

Mn 

com.hfad.starbuzz 

L @ 

TopLevel 

Activity.java 


new String[] { "_id" , 

"FAVORITE =1", 
null, null, null, null); 

ListView listFavorites = (ListView) findViewByld(R.id.list_favorites); 
CursorAdapter adapter = (CursorAdapter) listFavorites.getAdapter(); 
adapter.changeCursor (newCursor) ; Switth the turso*- being used by the list_-Pavov-ites 
favoritesCursor = newCursor; list view to the new tuvsov-. 

^ Change the value ot -CavovitesCuv-sov to the new tu*-sov so 
we tan tlose it in the attivity S onPestroyO method- 

//Close the cursor and database in the onDestroyO method 
QOverride 

public void onDestroyO { 
super.onDestroy(); 
favoritesCursor.close(); 
db.close (); 


} 


Let’s see what happens when we run the app now. 
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Test drive the app 

When we run the app, our favorite drinks are displayed in 
TopLevelActivity as before. When we click on one of the 
drinks, its details are displayed in DrinkActivity. If we 
uncheck the favorite checkbox for that drink and return to 
TopLevelActivity, the data in the list_f avorites list view 
is refreshed and the drink is no longer displayed. 



cursors and asynctasks 

Update layout 
Populate list view 
Refresh data 


i a 

ag a Q 10:13 | 

Q Starbuzz 



Stadbwzr 

Coffee 


Drinks 

Food 

Stores 

Your favorite drinks: 

Latte 




Cappuccino' 

The listjfavorrtcs 
LisfViev/ in'rtially 
don-tains a latte and 
a eappudeino. 


_atte 

Espresso and steamed milk 
0 Favorite 

When y/e dlidk on 
a la-tie, i-ts de-tails 
are displayed- 




_atte 

Espresso and steamed milk 
□ Favorite 

At 

We -then undhedk -the 
dhedkbo* io indidaie 
-the dv-ink is no longer 
a -favorite- 


I've been thinking... Using 
databases in my app clearly has 
a lot of advantages, but doesn't 
opening and reading from the 
database slow the app down? 


Starlbuzz 
®f Coffee 

Drinks 

Food 

Stores 

Your favorite drinks: 

Cappuccino 

/r 

^ When v/e return -to 
TopLevelAdtiviiy, -the latte 
is no lonjerlisted in -the 
Iist_-Pavovites list view. 


Databases are powerful, but they can be slow. 

That means that even though our app works, we need to keep 
an eye on performance... 
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meanwhile... 


databases can make your app go in sloooow-woooo.... 

Think about what your app has to do when it opens a database. It first 
needs to go searching for the database file. If the database file isn’t there, 
it needs to create a blank database. Then it needs to run all of the SQL 
commands to create tables inside the database and any initial data it needs. 

Finally, it needs to fire off some queries to get the data out of there. 

That all takes time. For a tiny database like the one used in the Starbuzz 
app, it’s not a lot of time. But as a database gets bigger and bigger, that 
time will increase and increase. Before you know it, your app will lose its 
mojo and will be slower than YouTube on Thanksgiving. 

There’s not a lot you can do about the speed of creating and reading from 
a database, but you can prevent it from slowing down your interface. 

life is better whew threads work together 

The big problem with accessing a slow database is that can make your 
app feel unresponsive. To understand why, you need to think about how 
threads work in Android. Since Lollipop, there are three kinds of threads 
you need to think about: 

The main event thread 

This is the real workhorse in Android. It listens for intents, it receives touch messages from 
the screen, and it calls all of the methods inside your activities. 

The render thread 

You don’t normally interact with this thread, but it reads a list of requests for screen 
updates and then calls the device’s low-level graphics hardware to repaint the screen and 
make your app look pretty. 

Any other threads that you create 


o 

© 

© 


If you’re not careful, your app will do almost all of its work on the main 
event thread because this thread runs your event methods. If you just 
drop your database code into the onCreate () method (as we did in 
the Starbuzz app), then the main event thread will be busy talking to the 
database, instead of rushing off to look for any events from the screen 
or other apps. If your database code takes a long time, users will feel like 
they’re being ignored or wonder if the app has crashed. 

So the trick is to move your database code off the main event 
thread and run it in a custom thread in the background. We’ll 
go through how you do this using the DrinkActivity code we wrote 
earlier in the chapter. As a reminder, the code updates the FAVORITE 
column in the Starbuzz database when the user clicks on the favorite 
checkbox, and displays a message if the database is unavailable. 
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We're going to run the DrinkActivity code to update the 
database in a background thread, but before we rush off and 
start hacking code, let's think about what we need to do. 

The code that we have at the moment does three different things. 
Choose the type of thread you think each should run on. We've 
completed the first one to start you off. 


© Set op the interface. 


int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 
CheckBox favorite = (CheckBox) findViewByld(R.id.favorite); 
ContentValues drinkValues = new ContentValues(); 


drinkValues.put("FAVORITE", favorite.isChecked()); 


Main event thread 


This dode mus*t v-uk on *the main 
event thread, as it needs to 
addess the adtivity s views. 


V 


A background thread 


© Talk to the database. 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
SQLiteDatabase db = starbuzzDatabaseHelper.getWriteableDatabase(); 
db.update("DRINK ", ...); 


Main event thread 

A background thread 




O Update what's displayed on the screen. 

Toast toast = Toast.makeText(...); 
toast.show(); 


Main event thread 

A background thread 
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sharpen solution 



We're going to run the DrinkActivity code to update the 
database in a background thread, but before we rush off and 
start hacking code, let's think about what we need to do. 

The code that we have at the moment does three different things. 
Choose the type of thread you think each should run on. We've 
completed the first one to start you off. 


© Set op the interface. 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 
CheckBox favorite = (CheckBox) findViewByld(R.id.favorite); 
ContentValues drinkValues = new ContentValues(); 
drinkValues.put("FAVORITE", favorite.isChecked()); 


Main event thread 

A background thread 

V 



© Talk to the database. 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 


SQLiteDatabase db = starbuzzDatabaseHelper.getWriteableDatabase(); 
db.update("DRINK",...); ^ 


Main event thread 

A background thread 




We want to run 
ihc database eode 
in the background- 


o 


Update what's displayed on the screen. 


Toast toast = Toast.makeText(...); 
toast.show(); 


We must run the Code to display a 
message on the screen on the main event 
thread; otherwise, well get an exception- 


Main event thread 

A background thread 

n/ 
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What code goes on which thread? 

When you use databases in your app, it’s a good idea to run database 
code in a background thread, and update views with the database 
data in the main event thread. We’re going to work through the 
onFavoritesClicked () method in the DrinkActivity code so 
that you can see how to approach this sort of problem. 

Here’s the code for the method (we’ve split it into sections, which we’ll 
describe below): 

//Update the database when the checkbox is clicked 
public void onFavoriteClicked(View view){ 


□ 

Starbuzz 


HU 

app/src/main 

MB 


java 


40 


com. hfad. starbuzz 

U 


D r i n k Ac ti v i ty.j a va 


© 


int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 
CheckBox favorite = (CheckBox) findViewByld(R.id.favorite); 
ContentValues drinkValues = new ContentValues(); 
drinkValues.put("FAVORITE", favorite.isChecked()); 


© 


SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getWritableDatabase(); 
db.update("DRINK", drinkValues, 

"_id = ?", new String[] {Integer.toString(drinkld)}); 

db.close(); 

} catch(SQLiteException e) { 


o 


Toast toast = Toast.makeText(this , "Database unavailable". Toast.LENGTH_SHORT); 
toast.show(); 

} 

} 


© 

o 

© 


Code that needs to be run before the database code 

The first few lines of code get the value of the favorite checkbox, and put it in the 
drinkValues ContentValues object. This code must be run before the database code. 

Database code that needs to be run on a background thread 

This updates the DRINK table. 

Code that needs to be run after the database code 

If the database is unavailable, we want to display a message to the user. This must run 
on the main event thread. 


We’re going to implement the code using an AsyncTask. What’s that, 
you ask? 
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AsyncTask 


AsyncTask performs asynchronous tasks 


An AsyncTask lets you perform operations in the background. When 
they’ve finished running, it then allows you to update views in the main 
event thread. If the task is repetitive, you can even use it to publish the 
progress of the task while it’s running. 


You create an AsyncTask by extending the AsyncTask class, 
and implementing its doInBackground () method. The code in 
this method runs in a background thread, so it’s the perfect place 
for you to put database code. The AsyncTask class also has an 
onPreExecute () method that runs before doInBackground (), 
and an onPostExecute () method that runs afterward. There’s an 
onProgressUpdate () method if you need to publish task progress. 

Here’s what an AsyncTask looks like: 




You add youv- Asy^Task 
dass as a* irmev- dass -fco -the 
aci ivi-ty -tha-t needs -to use i-t- 


private class MyAsyncTask extends AsyncTask<Params, Progress, Result> 

^ This method is optional- It v-uns before the 

protected void onPreExecute () { £ode y ou w ant to run in the background- 

//Code to run before executing the task x / , . , ... 

Y ou **ust i^plerwe^t this method- 
" It eohta'ms the Codt you y/a^t 

to \run m the baekavou^d- 

protected Result doInBackground(Params... params) { 

//Code that you want to run in a background thread 
} _ This method is optional. It lets 

— you publish process Jc the 

protected void onProgressUpdate (Progress . . . values) { todt vuwfmj in the bad^yround- 
//Code that you want to run to publish the progress of your task 


} 

protected void onPostExecute(Result result) { 
//Code that you want to run when the task 



-This method is also optional. It runs after the 
Code has -finished Tunning in the background- 

is complete 


} 


} 


AsyncTask is defined by three generic parameters: Params, 

Progress, and Results. Params is the type of object used to pass any 
task parameters to the doInBackground () method, Progress is the 
type of object used to indicate task progress, and Result is the type of 
the task result. You can set any of these to Void if you’re not going to use 
them. 

We’ll go through this over the next few pages by creating a new 
AsyncTask called UpdateDrinkTask we can use to update drinks in 
the background. Later on, we’ll add this to our DrinkActivity code 
as an inner class. 
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The onPreExecuteO method 

We’ll start with the onPreExecute () method. This gets called 
before the background task begins, and it’s used to set up the 
task. It’s called on the main event thread, so it has access to views 
in the user interface. The onPreExecute () method takes no 
parameters, and has a void return type. 

In our case, we’re going to use the onPreExecute () method 
to get the value of the favorite checkbox, and put it in the 
drinkValues ContentValues object. This is because we 
need access to the checkbox view in order to do this, and it must 
be done before any of our database code can be run. We’re using 
a separate attribute outside the method for the drinkValues 
ContentValues object so that other methods in the class can 
access the ContentValues object (we’ll look at these methods 
over the next few pages). 

Here’s the code: 



private class UpdateDrinkTask extends AsyncTask<Params , Progress, Result> { 

private ContentValues drinkValues; 

BeW we vw> the database Code, we need 

... .. _ _ ... . . aet the value ot the Wite dhedkbo*. 

protected void onPreExecuteO { 

CheckBox favorite = (CheckBox)findViewByld(R.id.favorite); 

drinkValues = new ContentValues(); 

drinkValues.put("FAVORITE", favorite.isChecked()); 

} 


Next, we’ll look at the doInBackground () method. 
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doInBackgroundQ 


The doInPackgroundd method 

The doInBackground () method runs in the background 
immediately after onPreExecute () . You define what type of 
parameters the task should receive, and what the return type should 
be. 

We’re going to use the doInBackground () method for our 
database code so that it runs in a background thread. We’ll pass 
it the ID of the drink we need to update; because the drink ID is 
an int value, we need to specify that the doInBackground () 
method receives Integer objects. We’ll use a Boolean return 
value so we can tell whether the code ran successfully: 



private class UpdateDrinkTask extends AsyncTask<Integer, Progress, Boolean> { 

? , \ 

You dhan<\e inis to Integer to Y<> u £han<\e -this -fco 

private ContentValues drinkValues; , . i C j_l n i . t i » 

matdh the parameter ok the boolean to matdh the 

doInBadk^roundO method. return -type o( the 

doInBaekjyroundO method- 

This dode runs in a badkjround thread- 

-V This is a* avv-ay ©t In-teyv-s, 

protected Boolean doInBackground(Integer. . . drinks) { bu*t v/e’ll just indlude one item, 

int drinkld = drinks [0]; — - the drink IP- 


SQLiteOpenHelper starbuzzDatabaseHelper = 

new StarbuzzDatabaseHelper(DrinkActivity.this); 

try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getWritableDatabase(); 


db.update("DRINK", drinkValues, 

'r "_id = ?", new String[] 

db.close (); 
return true; 

} catch(SQLiteException e) { 
return false; 


{Integer.toString(drinkld)}) 


The updateO method uses the 
drinkl/alues obiedt that the 
onPreExeduteO method dreated- 


} 


} 


Next, we’ll look at the onProgressUpdate () method. 
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The onProgressUpdateO method 

The onProgressUpdate () method is called on the main event 
thread, so it has access to views in the user interface. You can use 
this method to display progress to the user by updating views on the 
screen. You define what type of parameters the method should have. 

The onProgressUpdate () method runs if a call to 
publishProgress () is made by the doInBackground () 
method like this: 

protected Boolean doInBackground(Integer... count) { 
for (int i = 0; i < count; i++) { 

publishProgress (i) ; ^_ TW|S ta || s the onPro^ressUpdaleO 

} method, passing m a value ot i 

} 


(^^rcExecuten^) 



doln&ackgroimdO 



I 



onProgressUpdateO 


protected void onProgressUpdate(Integer... progress) { 
setProgress(progress[0]); 

} 


In our app, we’re not publishing the progress of our task, so we 
don’t need to implement this method. We’ll indicate that we’re not 
using any objects for task progress by changing the signature of 
UpdateDrinkTask: 


WcVc not us'm^ the 

onPv-oyessUp dateO 
method, so this is Void- 


private class UpdateDrinkTask extends AsyncTas k<Integer , Void, Boolean> { 


Finally, we’ll look at the on Post Execute () method. 
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The onPostExecuteO method 

The onPostExecute () method is called after the 
background task has finished. It’s called on the main event 
thread, so it has access to views in the user interface. You can 
use this method to present the results of the task to the user. 

The onPostExecute () method gets passed the results of the 
doInBackground () method, so it must take parameters that 
match the doInBackground () return type. 

We’re going to use the onPostExecute () method to check 
whether the database code in the doInBackground () 
method ran successfully. If it didn’t, we’ll display a message 
to the user. We’re doing this in the onPostExecute () 
method, as this method can update the user interface; the 
doInBackground () method runs in a background thread, so 
it can’t update views. 

Here’s the code: 



onPreExecuteO 




doInPackgroundO 




onProgressUpdateO 




onPostExecuteO 



private class UpdateDrinkTask extends AsyncTaskClnteger, Void, Boolean> { 


r 

Tins is set “to Boolean as ouv 
do|nBa£k$V"oundO method vetiAV-ns a Boolean- 


Pass the toast the 
DvinkA^tivity £onte*t- 


protected void onPostExecute(Boolean success) { 
if (!success) { 

Toast toast = Toast.makeText(DrinkActivity.this, 

"Database unavailable". Toast.LENGTHJSHORT); 

toast.show(); 


} 


} 


} 


Now that we’ve written the code for our AsyncTask methods, 
let’s revisit the AsyncTask class parameters. 
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The AsyncTask class parameters 


When we first introduced the AsyncTask class, we said it was defined 
by three generic parameters: Params, Progress, and Results. 
You specify what these are by looking at the type of parameters 
used by your doInBackground (), onProgressUpdate (), 
and onPostExecute () methods. Params is the type of the 
doInBackground () parameters, Progress is the type of the 
onProgressUpdate () parameters, and Result is the type of the 
onPostExecute () parameters: 


private class MyAsyncTask extends AsyncTask<Params, Progress, Result> 


protected void onPreExecute() { 

//Code to run before executing the 


} 


protected Result doInBackground (Params 

//Code that you want to run in a background 

} 

protected void onProgressUpdate (Progress... values) { 

//Code that you want to run to publish the progress of your task 



} 





protected void onPostExecute (Result result) { 

//Code that you want to run when the task is complete 

} 


In our example, doInBackground () takes Integer parameters, 
onPostExecute () takes a Boolean parameter, and we’re not using 
the onProgressUpdate () method. This means that in our example, 
Params is Integer, Progress is Void, and Result is Boolean: 


This is Void because we 
did*’! implement the 

onPvoy-essUydateO method 


private class UpdateDrinkTask extends AsyncTaskCInteger, Void, Boolean> { 




protected Boolean doInBackground (Integer ... drinks) { 


protected void onPostExecute (Boolean ... success) 


} 


} 


We’ll show you the full UpdateDrinkTask class on the next page. 
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The full UpdateDrinkTask class 

Here’s the full code for the UpdateDrinkTask class. It needs 
to be added to DrinkActivity as an inner class, but we 
suggest you wait to do that until we show you how to execute it 
and show you the full DrinkActwity.java code listing. 


private class UpdateDrinkTask extends AsyncTask<Integer, Void, Boolean> { 

private ContentValues drinkValues; — We've de-Pmed dvmkl/alues as a pv-ivate 

variable, as it's wsed by -the onExeduteO 

protected void onPreExecute () { 3«d dofnBacktyroundO methods. 


CheckBox favorite = (CheckBox) findViewByld(R.id.favorite); 


drinkValues = new ContentValues(); 

drinkValues.put("FAVORITE", favorite.isChecked() 

* Ou\r database dode goes m the 

^ doInBadkgroundO method- 

protected Boolean doInBackground(Integer... drinks) 


Be-fore we run the database 
dode, we need to Put 
the value o-f the -favorite 
dhedkbo* in the drinkValues 
ContentValues objedt- 


int drinkld = drinks[0]; 


SQLiteOpenHelper starbuzzDatabaseHelper = 

new StarbuzzDatabaseHelper(DrinkActivity.this); 


try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getWritableDatabase(); 
db.update("DRINK", drinkValues, 

"_id = ?", new String[] {Integer.toString(drinkld)}); 

db.close (); 
return true; 

} catch(SQLiteException e) { 
return false; 


A*fter the database dode has run in the badkground, dhedk 
whether it ran suddess-fully- l-P it didn t, display a message- 

protected void onPostExecute(Boolean success) { 
if (!success) { 

Toast toast = Toast.makeText(DrinkActivity.this, 

"Database unavailable". Toast.LENGTH_SHORT); 
toast. show 0 ; <C-Wb have -to put the Code to display a message m 

} the o»PostExedute0 method, as it »eeds to be ru» 

} 0h the eve »± th«read to update the sdree*. 
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Execute the AsyncTask... 

You run the AsyncTask by calling the AsyncTask execute () 
method and passing it any parameters required by the 
doInBackground () method. As an example, we want to pass the 
drink the user chose to our AsyncTask’s doInBackground () 
method, so we call it using: 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 

new UpdateDrinkTask() . execute (drinkld) ; Execute the AsyndTask and pass it the drink ID- 

The type of parameter you pass with the execute () method 
must match the type of parameter expected by the AsyncTask 
doInBackground () method. We’re passing an integer value (the 
drink ID), which matches the type of parameter expected by our 
doInBackground () method: 

protected Boolean doInBackground(Integer... drinks) { 


} 


...in PrinkActivity's onFavoritesClickedO 
method 

Our UpdateDrinkTask class (the AsyncTask we created) needs to 
update the FAVORITE column in the Starbuzz database whenever the 
favorite checkbox in DrinkActivity is clicked. We therefore need 
to execute it in DrinkActivity’s onFavoritesClickedO method. 
Here’s what the new version of the method looks like: 


//Update the database when the checkbox is clicked 
public void onFavoriteClicked(View view){ 

int drinkld = (Integer)getlntent().getExtras().get(EXTRA_DRINKID); 
new UpdateDrinkTask () .execute (drinkld) ; -* The new version o-p "the 

} onFavov-itesClidkedO method no 

We’ll show you the new DrinkActivity.java code over the next few pages. 


longev do*tarns dode to update the 
FAVORITB dolumn. Instead, it calls 
the AsyndTask, whidh pev-fovms the 
update in the badkground- 
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The full PrinkActivity-java code 

Here’s the complete code for DrinkActivity.java ; update your 
version of the code to reflect our changes: 

package com.hfad.starbuzz; 


□ 

Starbuzz 

4Z3 

app/src/main 

LQ 


import android.app.Activity; 
import android.os.Bundle; 
import android.widget.ImageView; 
import android.widget.TextView; 
import android.widget.Toast; 
import android.database.Cursor; 
import android.database.sqlite.SQLiteDatabase; 
import android.database.sqlite.SQLiteException; 
import android.database.sqlite.SQLiteOpenHelper; 
import android.view.View; 
import android.widget.CheckBox; 
import android.content.ContentValues; 

import android. os. AsyncTask ; 1/VcVc us*m^ -the A s yn£Tisk dlass, so y/C r\ttd “to imfov-t **t- 


java 

-■ 

com.hfad.starbuzz 

L @ 

DrinkActivity.java 


public class DrinkActivity extends Activity { 


public static final String EXTRA_DRINKID = "drinkld"; 

We don'i need -to dhange -the onCveaieO method, 
@Override w eVe just showing it -for domfleteness. 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_drink); 


//Get the drink from the intent 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 


//Create a cursor 

SQLiteOpenHelper starbuzzDatabaseHelper = new StarbuzzDatabaseHelper(this); 
try { 


SQLiteDatabase db = starbuzzDatabaseHelper.getReadableDatabase(); 
Cursor cursor = db.query("DRINK", 


new String[]{"NAME", "DESCRIPTION", "IMAGE_RESOURCE_ID", "FAVORITE"}, 
"_id = ?", 

new String[]{Integer.toString(drinkld)}, 
null, null, null); 


The Code doniinues 
on ihe nex-t paje. 
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The full PrinkActivity.java code (continued) 


//Move to the first record in the Cursor 


□ 


if (cursor.moveToFirst ()) { 

//Get the drink details from the cursor 
String nameText = cursor.getString(0); 

String descriptionText = cursor.getString(1); 

int photold = cursor.getlnt(2); 

boolean isFavorite = (cursor.getlnt(3) == 1); 


Starbuzz 


app/src/main 


hjB 


4T) 


java 


MC3 


com.hfad.starbuzz 


L 



//Populate the drink name 

TextView name = (TextView) findViewByld(R.id.name); 


Dr i n kActi vi ty.java 


name.setText(nameText); 

//Populate the drink description 

TextView description = (TextView) findViewByld(R.id.description); 
description.setText(descriptionText); 

//Populate the drink image 

ImageView photo = (ImageView) findViewByld(R.id.photo); 
photo.setlmageResource(photold); 
photo.setContentDescription(nameText); 

//Populate the favorite checkbox 

CheckBox favorite = (CheckBox)findViewByld(R.id.favorite) ; 
favorite.setChecked(isFavorite) ; 


cursor.close(); 
db.close (); 


None o-P -the Code on -this 
pa$e heeds -to change. 


} catch (SQLiteException e) { 

Toast toast = Toast.makeText(this 


"Database unavailable" 


Toast.LENGTH_SHORT); 


toast.show(); 


The Code 
oh -the page. 
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The full PrinkActivity.java code (continued) 


//Update the database when the checkbox is clicked 
public void onFavoriteClicked(View view){ 

int drinkld = (Integer) getlntent().getExtras().get(EXTRA_DRINKID); 

□ 

Starbuzz 

4B 

app/src/main 

'"t] 

com. hfad .starbuzz 

DrinkActivity.java 


MIhe isl r T^r TT f ivori t^-"=—(ChcUkBux)—fTndViewDy 

"n fU il i i nn irinbthu p = xiew r ^n1~ or> ' l ~^ z * f r r i uu 
—d mikValiie s- .puL ("FAVORITE, fa^oriLc.ioe t iuc]^d() ) , 


— re ^ ore iTC^—to—H in Hntnhntp _±Jnp^Avnn t . 

f^b^qpHplppr = - — 

"n^inr- r !tnrt i T"~Pit n b n rnH^l p o rt l lTi 1 ) 

- 



GQLi L^DaLabdoC db - starburt - abdoollelpei . yeLWii LableDatabose () ; ■ 
^TgrTh pdatc ("DR ^fflC 7 ^ 

Deleie all -these lines o( 
Code, as y/e v-e now using Bn 
MyntTask (or -these actions. 



new UpdateDrinkTask () . execute (drinkld) ; ^£%edu-td “the "task. 


The Code don-tinues 
on -the nex-1 page- 
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The full PrmkActivity.java code (continued) 


Md the AsyncTask to the activity as an inner class. 

sk< 


//Inner class to update the drink. 

private class UpdateDrinkTask extends AsyncTask<Integer, Void, Boolean> { 
private ContentValues drinkValues; 

Before the database Code runs, put the value of the 

protected void onPreExecute () { checkbo* in the drinkValues ContentValues object- 

CheckBox favorite = (CheckBox) findViewByld (R. id. favorite) ; 
drinkValues = new ContentValues(); 

drinkValues.put("FAVORITE", favorite.isChecked()); 

} 

Run the database Code in a 

protected Boolean doInBackground(Integer. . . drinks) { bddajvouhd thread- 

int drinkld = drinks[0]; 

SQLiteOpenHelper starbuzzDatabaseHelper = 

new StarbuzzDatabaseHelper(DrinkActivity.this); 

try { 

SQLiteDatabase db = starbuzzDatabaseHelper.getWritableDatabase(); 
db.update("DRINK", drinkValues, 

"_id = ?", new String[] {Integer.toString(drinkld)}); 

db. close () ; 
return true; 

} catch(SQLiteException e) { 
return false; 


Update the value o£ □ 

the FAVORITE Column. Starbuzz 

4H) 

app/src/main 


} 


} 


L Q 

m 


java 


protected void onPostExecute(Boolean success) { 
if (!success) { 

Toast toast = Toast.makeText(DrinkActivity.this, 

"Database unavailable", Toast.LENGTH_SHORT) 

toast.show(); 

} ^ 

If the database code didn't run 

correctly, display a message to the user. 


com.hfad.starbuzz 
L @ 

DrinkActivity.java 


That’s everything you need in order to create an AsyncTask. 
Let’s check what happens when we run the app. 
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Test drive the app 


When we run the app and navigate to a drink, we can 
indicate that the drink is a favorite drink by checking the 
“favorite” checkbox. Clicking on the checkbox still updates the 
FAVORITE column in the database with its value, but this 
time the code is running on a background thread. 


In an ideal world, all of your database 
code should run in the background. 
We’re not going to change our other 
Starbuzz activities to do this, but why 
not make this change yourself? 


fl □ 

^ Q 9:43 1 

(3 Starbuzz 




:appuccino 

Espresso, hot milk and steamed-milk foam 
Favorite 

Ou\r app still writes data to 
the database, but this ti^e it 
does it on a background thread- 


I’ve written code before that 
just ran the database code and it was 
fine. Do I really need to run it in the 
background? 

For really small databases, like the 
one in the Starbuzz app, you probably 
won’t notice the time it takes to access 
the database. But that’s just because 
the database is small. If you use a larger 
database, or if you run an app on a slower 
device, the time it takes to access the 
database will be significant. So yes, you 
should always run database code in the 
background. 


there j£tre no 

- Dumb Questions 

O: Remind me—why is it bad to 
update a view from the background 
thread? 

The short answer is that it will throw 
an exception if you try. The longer answer 
is that multithreaded user interfaces are 
hugely buggy. Android avoided the problem 
by simply banning them. 

% Which part of the database code 
is slowest: opening the database, or 
reading data from it? 

There’s no general way of knowing. 

If your database has a complex data 
structure, opening the database for the 
first time will take a long time because it 
will need to create all the tables. If you’re 
running a complex query, that might take a 
very long time. In general, play it safe and 
run everything in the background. 


O: If it take a few seconds to read 
data from the database, what will the 
user see? 

The user will see blank views until 
the database code sets the values. 

Q; Why have we put the database 
code for just one activity in an 
AsyncTask? 

We wanted to show you how to 
use AsyncTasks in one activity as 
an example. In the real world, you should 
do this for the database code in all your 
activities. 
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Your Android Toolbox 


You’ve got Chapter 17 under 
your belt and now you’ve 
added writing to SQLite 
databases to your toolbox. 



BULLET POINTS 


■ The CursorAdapter 

changeCursor () method replaces 
the cursor currently used by a cursor 
adapter with a new cursor that you 
provide. It then closes the old cursor. 


You tan download 
the -Cull tode -for 
the chapter Crow 
httj>s : //tinyuV-Uo«»/ 
tteadfiv-stAndroid- 


Run your database code in a 
background thread using AsyncTask. 


A summary of the AsyncTask steps 



© 


onPreExecute() is used to set up the task. 

It’s called before the background task begins, and runs on the 
main event thread. 


o 


doInBackground() runs in the background thread. 

It runs immediately after onPreExecute () . You can specify 
what type of parameters it has, and what its return type is. 


onProgressUpdateO 


© 


onProgressUpdate() is used to display progress. 

It runs in the main event thread when the 
doInBackground () method calls publishProgress (). 



© 


onPostExecute() is used to display the task outcome 
to the user when doInBackground has finished. 

It runs in the main event thread and takes the return value of 
doInBackground () as a parameter. 
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* At Your Service + 

7S 



There are some operations you want to keep on running, 
irrespective Of Which app has the focus. If you start downloading a file, 
for instance, you don’t want the download to stop when you switch to another app. In this 
chapter we’ll introduce you to started services, components that run operations in the 
background. You’ll see how to create a started service using the IntentService class, 
and find out how its lifecycle fits in with that of an activity. Along the way, you’ll discover 
how to log messages, and keep users informed using Android’s built-in notification 
service. 


this is a new chapter 
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Services work in the background 

An Android app is a collection of activities and other 
components. The bulk of your app’s code is there to interact 
with the user, but sometimes you need to do things in the 
background, such as download a large file, stream a piece of 
music, or listen for a message from the server. 

These kinds of tasks aren’t what activities are designed to 
do. In simple cases, you can create a thread, but if you’re 
not careful your activity code will start to get complex and 
unreadable. 

That’s why services were invented. A service is an 
application component like an activity but without a user 
interface. They have a simpler lifecycle than activities, and 
they come with a bunch of features that make it easy to write 
code that will run in the background while the user is doing 
something else. 

There are three types of service 

Services come in three main flavors: 


In addition to writing your 
own services, you can use 
Android’s built -in ones. 

Built-in services include the 
notification service, location 
service, alarm service, and 
download service. 


o 


Started services 

A started service can run in the background indefinitely, even when the 
activity that started it is destroyed. If you wanted to download a large file 
from the Internet, you would probably create it as a started service. Once 
the operation is done, the service stops. 


o 


Bound services 

A bound service is bound to another application component such as an 
activity. The activity can interact with it, send requests, and get results. 

A bound service runs as long as components are bound to it. When the 
components are no longer bound, the service is destroyed. If you wanted 
to create an odometer to measure the distance traveled by a vehicle, for 
example, you’d probably use a bound service. This way, any activities 
bound to the service could keep asking the service for updates on the 
distance traveled. 


o 


Scheduled services 

A scheduled service is one that’s scheduled to run at a particular time. As an 
example, from API 21, you can schedule jobs to run at an appropriate time. 


In this chapter, we’re going to look at how you create a started 
service. 
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We'll create a STARTER service 


We’re going to create a new project that contains an activity 
called MainActivity, and a started service called 
DelayedMessageService. Whenever MainActivity 
calls DelayedMessageService, it will wait for 10 seconds 
and then display a piece of text. 

will use -this layout 

activity_main.xml 

The activity will pa: 
text to the service. 






The sev-vite will 
display the text 
a-ftev 1 0 seconds. 


MainActivity.java DelayedMessageService.java 


We’re going to do this in two stages: 


© 

© 


Display the message in Androids log. 

We’ll start by displaying the message in Android’s log so that we can check 
that the service works OK. We can look at the log in Android Studio. 

Display the message in a notification. 

We’ll get DelayedMessageService to use Android’s built-in 
notification service to display the message in a notification. 



We’ll start by creating the project. Create a new Android project for an 
application named “Joke” with a company domain of “hfad.com”, making 
the package name com. hf ad. j oke. The minimum SDK should be API 
19 so that it will work with most devices. You’ll need an empty activity 
named “MainActivity” and a layout named “activity_main” so that your 
code matches ours. Make sure that you uncheck the Backwards 
Compatibility (AppCompat) option when you create the activity. 

The next thing we need to do is create the service. 
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IntentService 


Log 

Display notification 


Use the IntentService class to create 
a basic started service 


The simplest way of creating a started service is to extend the 
IntentService class, as it provides you with most of the 
functionality you need. You start it with an intent, and it runs the 
code that you specify in a separate thread. 



0^0 




Configure Component 

Android Studio 


l 1 


We’re going to add a new intent service to our project. To do this, 
switch to the Project view of Android Studio’s explorer, click on 
the com. hf ad. j oke package in the app/src/main /java folder, go 
to File—>New..., and select the Service option. When prompted, 
choose the option to create a new Intent Service. Name the service 
“DelayedMessageService” and uncheck the option to include 
helper start methods to minimize the amount of code that Android 
Studio generates for you. Click on the Finish button, then replace 
the code in DelayedMessageService.java with the code here: 

package com.hfad.joke; 



import android.app.IntentService; 
import android.content.Intent; 

public class DelayedMessageService 


Extend the IhtehtServiee elass. 

V 

extends IntentService { 


Some versions o-f /Wroid Studio 
may ask you what the sourde 
lan^ua^e should be- l-P prompted, 
seledt the Option -for Java. 


public DelayedMessageService() { 

super("DelayedMessageService"); 

} put tVie tode you wa«t tte sewide to 

Vun w tbe Oftttandlelntento method- 
@Override ^ 

protected void onHandleIntent(Intent intent) { 
//Code to do something 

} 

} 

The above code is all you need to create a basic intent service. You 
extend the IntentService class, add a public constructor, and 
implement the onHandle Intent () method. 


□ 

Joke 

L a 

app/sre/main 


java 


433 


com. hfad .joke 

i_r 


DelayedMessage 

Service.java 


The onHandle Intent () method should contain the code you want 
to run each time the service is passed an intent. It runs in a separate 
thread. If it’s passed multiple intents, it deals with them one at a time. 


We want DelayedMessageService to display a message in 
Android’s log, so let’s look at how you log messages. 
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How to log messages 



Log 

Display notification 


Adding messages to a log can be a useful way of checking that your 
code works the way you want. You tell Android what to log in your 
Java code, and when the app’s running, you check the output in 
Android’s log (a.k.a. logcat). 

You log messages using one of the following methods in the 
Android. util. Log class: 


Log.v(String tag, String message) 
Log.d(String tag, String message) 
Log.i(String tag, String message) 
Log.w(String tag, String message) 
Log.e(String tag, String message) 


Logs a verbose message. 

Logs a debug message. 

Logs an information message. 
Logs a warning message. 

Logs an error message. 


Each message is composed of a String tag you use to identify the 
source of the message, and the message itself. As an example, to log 
a verbose message that’s come from DelayedMessageService, 
you use the Log. v () method like this: 

Log.v("DelayedMessageService", "This is a message"); 

You can view the logcat in Android Studio and filter by the 
different types of message. To see the logcat, select the Android 
Monitor option at the bottom of your project screen in Android 
Studio and then select the logcat tab: 


There’s also a Logwt-fO 
method you dan use to report 
exceptions that should never 
happen. ACCording to the Android 
documentation, wt-f means 

'What a Terrible Failure” We 
know it really means "Welcome 
to Fiskidagurinn,” which refers 
to the £jreat Fish Pay -festival 
held annually in Dalvik, Iceland- 
Android developers can often be 
heard to say, u My A\/D just took 
8 minutes to boot up. WTF??’ as 
a tribute to the small town that 
gave its name to the standard 
Android executable bytecode 
-format- 


Seledt the Wat tab. filter on the 

/ type or message here- 

Verbose A 1 ^ 



\ Regex 


Show onfy selected application 


This is the logcat area- Any messages you log will appear here- 


0: Messages [5] Terminal 6: Android Monitor ^4: Run ^TODD 

Q Event Log [f] Cradle Console 

1 1 Cradle build finished in 3s 125ms Ea minute ago) As*. 

1:1 LF4 UTF-ES Context: <no eontext> la ^ 



Select the Android Monitor option- 


you are here ► 


743 






























DelayedMessageService code 


Log 

Display notification 

We want our service to get a piece of text from an intent, wait for 10 
seconds, then display the piece of text in the log. To do this, we’ll 
add a showText () method to log the text, and then call it from the 
onHandleIntent () method after a delay of 10 seconds. 

Here’s the full code for DelayedMessageService.java (update your version of 
the code to reflect our changes): 

package com.hfad.joke; 


The full PelavedMessaaeService code 


import android.app.IntentService; 
import android.content.Intent; 

import android.util.LogWeVe ^ ^he L< ^ d | asS) so we * eed impo ^ £ 

public class DelayedMessageService extends IntentService { 

Use a Constant t o pass 

public static final String EXTRA_MESSAGE = "message"; a message -from -the 

activity t o -the service- 

public DelayedMessageService() { 

super("DelayedMessageService") ; Call -the super donstrudtor- 

} This method Contains the Code you want to 

tun when the servide redeives an intent- 

QOverride ^ 

protected void onHandlelntent(Intent intent) { 

synchronized (this) { 
try { 

wait(10000); 

} catch (InterruptedException e) { 
e.printstackTrace(); 

} 

} 


VVai-t 1 0 seconds. 


□ 

Joke 

HU 

app/sre/main 

LQ 

java 


4U 


-the te*t -Prom -the intent 

V 

String text = intent.getstringExtra(EXTRA_MESSAGE); 
showText(text); 

^ ^>-Call the show"le*tO method- 

private void showText(final String text) { 

Log.v("DelayedMessageService", "The message is: " + text) 
} ^ 

This logs a pi ttt o( te*t SO we £an sec i-i in 
the logeat through Android Studio. 


com. hfad.joke 

L S 

DelayedMessage 

Service.java 
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You declare services in Android Manifest.xml 


Log 

Display notification 


Just like activities, each service needs to be declared in AndroidManifest.xml 
so that Android can call it; if a service isn’t declared in this file. Android 
won’t know it’s there and won’t be able to call it. 

Android Studio should update AndroidManifest.xml for you automatically 
whenever you create a new service by adding a new <service> 
element. Here’s what our AndroidManifest.xml code looks like: 


<?xml version="1.0" encoding="utf-8"?> 

Cmanifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="com.hfad.j oke"> 


□ 


Joke 


H3 

app/src/main 

L j<Xml^ 

]</ XmlI 

AndroidManifest.xml 


Application 

f android:allowBackup="true" 

1 wowy i-p \ android: icon="@mipmap/ic_launcher" 
this Code looks < android:label="@string/app_name" 
di-PPcvCht tha* ) android:roundIcon="Qmipmap/ic_launcher_round" 
y°^ s * android: supportsRtl="true" 

^android:theme="@style/AppTheme"> 

<activity android:name=".MainActivity"> 

<intent-filter> 

<action android:name="android.intent.action.MAIN" /> 

<category android:name="android.intent.category.LAUNCHER" /> 

</intent-filter> 

</activity> 

You declare a service m A*droidA1ani'Pes'b.*ml like this. 
<service Android Studio should do this -for you automatically. 

android:name=".DelayedMessageService" 
android:exported="false"> 

</service> f he has a M " m Loht it so 

</a PP iication> that ca » * with the package 

</manifest> 


^me to derive the -fully Qualified class »ame. 


The <service> element contains two attributes: name and 
exported. The name attribute tells Android what the name of 
the service is—in our case, DelayedMessageService. The 
exported attribute tells Android whether the service can be used by 
other apps. Setting it to false means that the service will only be used 
within the current app. 

Now that we have a service, let’s get MainActivity to start it. 
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Add a button to activity_wain.xwl 

We’re going to get MainActivity to start 

DelayedMes sage Service whenever a button is clicked, so 

we’ll add the button to MainActivity’s layout. 

First, add the following values to strings, xml: 


Log 

Display notification 


□ 

:e 

4H 


Joke 


<string name="question">What is the secret of comedy?</string> 
<string name="response">Timing!</string> 

Then, replace your activity_main.xml code with ours below so 
that MainActivity displays a button: 

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout 

xmlns:android= M http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_j?arent" 
android:layout_height="match_j?arent" 
android:orientation="vertical" 
android:padding=" 16 dp" 

tools:context="com.hfad.joke.MainActivity"> 


app/src/main 


m 3 

values 


strings.xml 


□ 

Joke 

4 a 

app/src/main 


m3 

layout 


<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content 
android:layout_gravity="center_horizontal" 

android: text="@string/question" .XThis Creates a button. When it's 

android:id="@+id/button" \ (-hiked, the onCliekO method 

android:onClick="onClick"/> 


</LinearLayout> 


l</XmlI 

activity_main.xml 


-, W'.v rnc unc 

tKc activity will get called. 


i □ 

Q 12:32 | 

Joke 



The button will call an onClick() method whenever the 
user clicks it, so we’ll add this method to MainActivity. 
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You start a service using startServiceO 



Log 

Display notification 


We’ll use MainActivity’s onClick () method to start 
DelayedMes sage Service whenever the user clicks on 
the button. You start a service from an activity in a similar 
way to how you start an activity. You create an explicit intent 
that’s directed at the service you want to start, then use the 
startService () method in your activity to start it: 


Intent intent = new Intent(this, DelayedMessageService.class); 

startService (intent) ; ^ ---_ Starting a service is just like starting an activity, 

except you use startServiceO instead o-f startActivityO. 

Here’s our code for MainActivity.java ; update your version to match 
ours: 


package com.hfad.j oke; 

import android.app.Activity; 
import android.content.Intent; 

import android.os.Bundle; /Were using these classes, so 

import android.view.View; we need to import them. 


□ 

Joke 

4T3 

app/src/main 

4H 


java 


LQ 


public class MainActivity extends Activity { 

1/VcVc using Activity bev-e, but you 

(^Override £ould use A f f Compat Adtivi ty instead- 


com. hfad .joke 

LT 


MainActivity.java 


protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_main); 

^ ^Tbis will \run v/ben tbe 

button gets dlidked- Create tbe intent- 

public void onClick(View view) { / 

Intent intent = new Intent(this, DelayedMessageService.class); 
intent.putExtra(DelayedMessageService.EXTRA_MESSAGE, 

getResources().getstring(R.string.response)); 

startService (intent) ; 

} T 

Start tbe sewide- 


‘Add text -to tbe intent 


That’s all the code we need to get our activity to start the service. 
Before we take it for a test drive, let’s go through what happens 
when the code runs. 
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what happens 

What happens when you run the app 

Here’s what the code does when we run the app: 


Log 

Display notification 


MainActivity starts DelayedMessageService by calling startService() 
and passing it an intent. 

The intent contains the message MainActivity wants 
DelayedMessageService to display, in this case “Timing!”. 



DelayedMessageService 


Q 


When DelayedMessageService receives the intent, its onHandleIntent() 
method runs. 


DelayedMessageService waits for 10 seconds. 



O 


DelayedMessageService logs the message. 



DelayedMessageService 


The message is: 
Timing! 


0 


When DelayedMessageService has finished running, it's destroyed. 



DelayedMessageService 


Let’s take the app for a test drive so we can see it working. 
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Vr6" 

Test drive the app 



Log 

Display notification 


When you run the app, MainActivity is displayed. It contains a 
single button: 



Press the button, switch back to Android Studio, and watch the 
logcat output in the bottom part of the IDE. After 10 seconds, the 
message “Timing!” should appear in the logcat. 


c DelayedMessageService 

9 

public class 

MainActivity extends Activity { 


Android Monitor 




L 

[ 11 Emulator Nexus_5X_APl_25 Android 7.1.1, API 25 $ \ 

com.hfad joke (123S1) 



Ift* logcat 



Monitors 


Verbose jJ (O, ') 0 Regex Show only selected application * \ 


03-22 12 2 39:26 - 294 12381-1845i5/com. hfad, joke V/ Delay edMessageService: The message is: Timing! 


This is -the logdai window. 


/ 0: Messages 


Terminal 


6: Android Monitor ^4:Run ^TODO 


(]) Event Log 0 Cradle Console 


I I /Cradle build finished in 3s L2Sms (7 minutes ago) 


2:L LFt UTF-SS Conte x t : < no context> 


■b ® 


03-22 12:39:26.294 12381-18456/com.hfad.joke V/DelayedMessageService: The message is: Timing! 


-f 


Now that you’ve seen DelayedMes sage Service running, let’s 
look in more detail at how started services work. 


A-ftcv- a 10-sefcond delay, "the 
message is displayed m the log- 
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started service states 


The states of a started service 

When an application component (such as an activity) starts a service, 
the service moves from being created to running to being destroyed. 

A started service spends most of its life in a running state; it’s been 
started by another component such as an activity, and it runs code 
in the background. It continues to run even if the component that 
started it is destroyed. When the service has finished running code, 
it’s destroyed. 




Service destroyed 


^^The sevvite object 
has been tvea*ced. 


^ The sev-viee has s-tar-ted and 
spends mos”t o( i-ts li-Pe here- 



hi this point, 
^^the sewide no 
longer exists. 


Just like an activity, when a service moves from being created to being 
destroyed, it triggers key service lifecycle methods, which it inherits. 


A started service runs 
alter it’s teen started. 


When the service is created, its onCreate () method gets called. 
You override this method if you want to perform any tasks needed to 
set up the service. 

When the service is ready to start, its onS tart Command () 
method is called. If you’re using an IntentService (which is 
usually the case for a started service), you don’t generally override 
this method. Instead, you add any code you want the service to 
run to its onHandleIntent () method, which is called after 
onStartCommand(). 


onCreateO gets called 
when the service is first 
created, and it’s where 
you do any service setup. 


The onDestroyO method is called when the started service is 
no longer running and it’s about to be destroyed. You override 
this method to perform any final cleanup tasks, such as freeing up 
resources. 

We’ll take a closer look at how these methods fit into the service states 
on the next page. 


onDestroyO gets called 
just helore the service 
gets destroyed. 
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The started service lifecycle: from create to destroy 

Here’s an overview of the started service lifecycle from birth to death. 



onStartCommand() 


onHandlelntent() 



© 

© 


The component calls startService() and 
the service gets created. 

The onCreate() method runs immediately 
after the service is created. 

The onCreate () method is where any service 
initialization code should go, as this method 
always gets called after the service has launched 
but before it starts running. 


^ The onStartCommand() method runs when 
the service is about to start. 

If your started service extends the 
IntentService class (which is usually the 
case), the onStartCommand () method creates 
a separate thread and onHandleIntent () is 
called. You add any code you want the service to 
run in the background to onHandle Intent () . 


o 


The service spends most of its life 
running. 


^ The onbestroyO method runs when the 

service has finished running, immediately 
before it's destroyed. 

The onDestroyO method enables you to 
perform any final cleanup tasks such as freeing up 
resources. 


Q 


After the onDestroyO method has run, 
the service is destroyed. 

The service ceases to exist. 


The onCreate (), onStartCommand(), and onDestroy() 
methods are three of the main service lifecycle methods. So where do 
these methods come from? 
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lifecycle methods 


Your service inherits the lifecycle methods 

As you saw earlier in the chapter, the started service you 
created extends the android, app . IntentService class. 

This class gives your service access to the Android lifecycle 
methods. Here’s a diagram showing the class hierarchy: 



Context abstract class 

(android.content.Context) 

An interface to global information about the application 
environment. Allows access to application resources, classes, and 
operations. 

ContextWrapper class 

(android.content.ContextWrapper) 

A proxy implementation for the Context. 


Service class 

(android.app.Service) 

The Service class implements default versions of the lifecycle 
methods. You’ll find out more about it in the next chapter. 


IntentService class 

(android.app.IntentService) 

The IntentService class gives you an easy way of creating 
started services. It includes a method, onHandleIntent (), 
which handles any intents it’s given on a background thread. 


YourStartedService class 

(com.hfad.foo) 

Most of the behavior of your started service is handled by 
superclass methods your service inherits. All you do is override the 
methods you need and add a public constructor. 


Now that you understand more about how started services work 
behind the scenes, have a go at the following exercise. After that, 
we’ll look at how we can make DelayedMessageService 
display its message in a notification. 
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Service Magnets 

Below is most of the code needed to create a started service called 
WombleService that plays a .mp3 file in the background, and an 
activity that uses it. See if you can finish off the code. 

^-This is the service. 


public class WombleService extends 


{ 


public WombleService() { 

super("WombleService"); 

} 


QOverride 

protected void. (Intent intent) { 

MediaPlayer mediaPlayer = 

MediaPlayer.create(getApplicationContext(), R.raw.wombling_song); 
mediaPlayer.start() ; 

y~i 


*This uses -tKe Android MediaPlayer class to play a -Pile called 
'worr.blm^sortg.rr'p}. The -Pile is located m the res/raw Polder. 


This is the activity- 

public class MainActivity extends Activity { 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

} 


public void onClick(View view) { 

Intent intent = new Intent (this,.); 


(intent); 


You V/OKT1 I r\tcd "to use 

all -these magnets. 
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Service Magnets Solution 


Below is most of the code needed to create a started service called 
WombleService that plays a .mp3 file in the background, and an 
activity that uses it. See if you can finish off the code. 

I-;-1 /£This is the sevvide- It e*tends 

public class WombleService extends | IntentServic^ ^J j the IntentSevvide dlass. 


public WombleService() { 

super("WombleService"); 



The dode needs to tun in the 
onttandlelntentO method- 

v- 


QOverride 

protected void I _Hill | (intent intent) { 

MediaPlayer mediaPlayer = 

MediaPlayer.create(getApplicationContext() , 
mediaPlayer.start() ; 


R.raw.wombling_song), 


public class MainActivity extends Activity { 


^-This is the adtwity 


@Override 

protected void onCreate(Bundle savedlnstanceState) { 

super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 


public void onClick(View view) { 

Intent intent = new Intent(this 


I 




Create an e*plidit intent 
directed at 1/VornbleServieedass. 


WombleService.class 


I) ; 


| startService ~~| 

■ t 

Start the service. 


(intent); 


You didn't need to 
use these magnets- 


Underground 
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Android has a built-in notification service 

We’re going to change our Joke app so that our message 
gets displayed in a notification. Notifications are 
messages that are displayed outside the app’s user interface. 

When a notification gets issued, it’s displayed as an icon in 
the notification area of the status bar. You can see details of 
the notification in the notification drawer, which you access 
by swiping down from the top of the screen: 



Log 

Display notification 


Heads-up notifications are temporarily displayed 
■m a float** window at the top of the screen- 


These are KO'ti'Pi^a'tioK i£ons. 


This is -the 

no'ti'Citatiott drawer. 



Unlike a toast or snackbar, notifications are available 
outside the app that issues them, so the user can access 
them no matter what app they’re currently using (if any). 
They’re much more configurable than toasts and snackbars, 
too. 

To display the notification, we’re going to use one of 
Android’s built-in services, the notification service. You’ll 
see how to do this over the next few pages. 
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Log 

Display notification 


AppCompat Support Library 

We’re going to create notifications using classes from the 
AppCompat Support Library so that our notifications will work 
consistently across a wide range of Android versions. While 
it’s possible to create notifications using classes from the main 
release of Android, recent changes to these classes mean that 
the newest features won’t be available on older versions. 

Before we can use the notification classes from the Support 
Library, we need to add it to our project as a dependency. 

To do this, choose File—^Project Structure, then click on the 
app module and choose Dependencies. Android Studio may 
have already added the AppCompat Support Library for you 
automatically. If so, you will see it listed as appcompat-v7. If it 
hasn’t been added, you will need to add it yourself. Click on the 
“+” button at the bottom or right side of the screen, choose the 
Library Dependency option, select the appcompat-v7 library, 
and then click on the OK button. Click on OK again to save 
your changes and close the Project Structure window. 


Use notifications from 
the AppCompat Support 
Library to allow apps 
running on older versions 
ol Android to include the 
newest features. 


Well use notifications from the 




eoo 


Project Structure 


+ - 

SDK Location 
Project 

Developer Se.. 
Ads 

Authentica... 

Notifications 

Modules — 


Properties Signing Flavors Build Types 


Dependencies 


Scope 

[include=[* jar], dir= libs} Compile 

androidTestCompilefcom.android.support.test.espressoiespressa-coreiZ.Z.Z 

tfl corn .a nd roi d . 5 up p art. constra i nt constra i nt- layout: 1.0.2 C o m pi I e 

/It junit:junit:4.12 Test compile 

fit com.andraid.5uppart'appcompat-v7:2S.3.D Compile 

tteve's -the v7 AppCompal Support Libvavy. 



To get DelayedMes sage Service to display a notification, 
there are three things we need to do: create a notification 
builder, tell the notification to start MainActivity when it’s 
clicked, and issue the notification. We’ll build up the code over 
the next few pages, then show you the full code at the end. 


756 Chapter 18 












started services 


First create a notification builder 



Log 

Display notification 


The first thing we need to do is create a notification builder. 
This enables you to build a notification with specific content 
and features. 

Each notification you create must include a small icon, a title, 
and some text as a bare minimum. Here’s the code to do that: 


The Koti-fiddtoonComfdt tidss 

tomes f\rom *the 

£uppov~t Library. 

sp 


NotificationCompat.Builder builder = new NotificationCompat.Builder(this) 


This displays a small - 
iton, \y\ -this ease a 
buil"t— \y\ Android iCom 


. setSmalllcon (android. R. drawable. sym_def_app_icon) 
.setContentTitle(getString(R.string.question)) 

. setContentText (text) ; ^-\ 

Se*t *the *ti*tle and *te%t 


To add more features to the notification, you simply add the 
appropriate method call to the builder. As an example, here’s 
how you additionally specify that the notification should have a 
high priority, vibrate the device when it appears, and disappear 
when the user clicks on it: 


NotificationCompat.Builder builder = new NotificationCompat.Builder(this) 


.setSmalllcon(android.R.drawable.sym_def_app_icon) 
.setContentTitle(getString(R.string.question) ) 


Alake it a high 
pviovi-ty and 
vibva-te -the device 


.setContentText(text) 

C. setPriority(NotificationCompat.PRIORITY_HIGH) 
.setVibrate(new long[] {0, 1000}) 


.setAutoCancel(true) 

r 

This makes -the ncti-Pieaiion 
disappear v/hen the user clicks on it- 


Y 

Wait -for O milliseconds 
before vibrating the device 
-for 1,000 milliseconds. 




Simply Chain the method 
calls together to add more 
-features to the notification- 


These are just some of the properties that you can set. You can 
also set properties such as the notification’s visibility to control 
whether it appears on the device lock screen, a number to 
display in case you want to send many notifications from the 
same app, and whether it should play a sound. You can find 
out more about these properties (and many others) here: 

https://developer, android, com/reference/android/support/v4/app/ 
NotificationCompat. Builder, html 

Next, we’ll add an action to the notification to tell it which 
activity to start when it’s clicked. 


You create a heads-up 
notification (one that 
appears in a small 
floating window) hy 
setting its priority to high, 
and making it vibrate the 
device or play a sound. 
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add an action to the notification 

Add an action to tell the notification 
which activity to start when clicked 

When you create a notification, it’s a good idea to add an action to 
it, specifying which activity in your app should be displayed when the 
user clicks on the notification. As an example, an email app might 
issue a notification when the user receives a new email, and display 
the contents of that email when the user clicks on it. In our particular 
case, we’re going to start MainActivity. 

You add an action by creating a pending intent to start an activity, 
which you then add to the notification. A pending intent is an intent 
that your app can pass to other applications. The application can then 
submit the intent on your app’s behalf at a later time. 

To create a pending intent, you first create an explicit intent directed 
to the activity you want to start when the notification is clicked. In our 
case, we want to start MainActivity, so we use: 

Intent actionlintent = new Intent(this, MainActivity.class); 

We then use that intent to create a pending intent using the 
Pendinglntent. getActivity () method. 

Pendinglntent actionPendinglntent = Pendinglntent.getActivity( 

This is a -Cla^ -that's used \( you ever A Context, in this ease the Current service- 

need to retrieve the pending intent- We — : 0, 

don't need to, so we're setting it to 0 . actionlntent, ^-‘This is the intent we Crea e a ove 

Pendinglntent.FLAG_UPDATE_CURRENT); 

The getActivity () method takes four parameters: a context 
(usually this), an int request code, the explicit intent we defined 
above, and a flag that specifies the pending intent’s behavior. In the 
above code, we’ve used a flag of FLAG_UPDATE_CURRENT. This 
means that if a matching pending intent already exists, its extra data 
will be updated with the contents of the new intent. Other options are 
FLAG_CANCEL_CURRENT (cancel any existing matching pending 
intents before generating a new one), FLAG_NO_CREATE (don’t 
create the pending intent if there’s no matching existing one), and 
FLAG_ONE_SHOT (you can only use the pending intent once). 

Once you’ve created the pending intent, you add it to the notification 
using the notification builder setContentlntent () method: 

builder. setContentlntent (actionPendinglntent). .. 

^~-Th.s adds the pending 

This tells the notification to start the activity specified in the intent i*vtewi to the noti-f idation. 

when the user clicks on the notification. 


T 

This means that i-f "there's 
a mashing pending intent, 
it will be updated- 


Log 

Display notification 


This is d normal intent 
that starts MainActivity. 

/ 
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Issue the notification using the 
built-in notification service 



Log 

Display notification 


Finally, you issue the notification using Android’s notification 
service. 

To do this, you first need to get a Notif icationManager. 

You do this by calling the getSystemService () method, 

passing it a parameter of NOTIFICATION_SERVICE: This jives you d££ess -fco 

Androids no-ii-Pida-tion service. 

NotificationManager notificationManager = ^ 

(NotificationManager) getSystemService(NOTIFICATION_SERVICE); 


You then use the notification manager to issue the notification 
by calling its notify () method. This takes two parameters: a 
notification ID and a Notification object. 

The notification ID is used to identify the notification. If you 
send another notification with the same ID, it will replace the 
current notification. This is useful if you want to update an 
existing notification with new information. 


You create the Notification object by calling the 
notification builder’s build () method. The notification it 
builds includes all the content and features you’ve specified via 
the notification builder. 

This is a* IP 

Here’s the code to issue the notification: |^ s a 

public static final int NOTIFICATION_ID = 5453; 


well use tor the notititaW 

, number we made 


NotificationManager notificationManager = 

(NotificationManager) getSystemService(N0TIFICATI0N_SERVICE); 

notificationManager.notify(NOTIFICATION_ID , builder.build()); 

^-l/Ue the notitieation servide to 

That’s everything we need to create and issue notifications. We’ll 
show you the full code for DelayedMes sage Service on the 
next page. 


display the notititation we treated 
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DelayedMessageService code 


The full code for PelayedMessageServicejava 

Here’s the full code for DelayedMessageService.java. It 
now uses a notification to display a message to the user. 

Update your code to match ours: 


package com.hfad.joke; 

import android.app.IntentService; 
import android.content.Intent; 

Pclc*tc “this line* 

import android.support.v4.app.NotificationCompat; 
import android.app.Pendinglntent; 
import android.app.NotificationManager; 


□ 

Joke 

app/src/main 

java 


MTJ 


Wert using -these e*tva classes, 
so v/e need b> impoirt ‘them. 


public class DelayedMessageService extends IntentService { 


com. hfad .joke 

L § 

DelayedMessage 

Service.java 


public static final String EXTRA_MESSAGE = 

public static final int NOTIFICATION_ID = 

public DelayedMessageService() { 

super("DelayedMessageService"); 

} 


"message"; 

5453; 

V 

This is used -to identity the 
notitiddtion- It Could he any 
we jus-t deeded on 


nuvnbeVj 


@Override 

protected void onHandlelntent(Intent intent) { 
synchronized (this) { 
try { 

wait(10000); 

} catch (InterruptedException e) { 
e.printStackTrace() ; 

} 


String text = intent.getStringExtra(EXTRA_MESSAGE); 
showText(text); 

The Code dorrtinues 
on -the nexi page- 
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The PelayedMessageServicejava code (continued) □ 


HT3 


private void showText(final String text) { 


//Create a notification builder 
NotificationCompat.Builder builder = 

new NotificationCompat.Builder(this) 


r 7 

Use a noti-Pi£atioh builder 

to spedi-Py -the £o*tent and 

-features o-P the noti-Pi£atio 


app/sre/main 

java_ 

com. hfad.joke 

L @ 

DelayedMessage 

. setSmalllcon (android. R. drawable. sym_def_app_icon) Service.java 

.setContentTitle(getString(R.string.question)) 

.setContentText(text) 

.setPriority(NotificationCompat.PRIORITY_HIGH) 

.setVibrate(new long[] {0, 1000}) 

.setAutoCancel(true); 


//Create an action 




Create an intent- 


Intent actionlntent = new Intent(this, MainActivity.class); 
Pendinglntent actionPendinglntent = Pendinglntent.getActivity( 

Use the intent to 

areak a pending intent °' 

actionlntent , 

Pendinglntent.FLAG_UPDATE_CURRENT); 

builder.setContentlntent(actionPendinglntent) All 

Add the pending intent 

to -the noti-Pidation. 

//Issue the notification 

NotificationManager notificationManager = 

(NotificationManager) getSystemService(NOTIFICATION_SERVICE); 
notificationManager.notify(NOTIFICATION_ID, builder.build()); 

Display -the noti-Pidation using 


a Koti-P ieation Onager. 


That’s all the code we need for our started service. Let’s go 
through what happens when the code runs. 
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Log 

Display notification 


What happens when you run the code 



Before you try running the updated app, let’s go through what 
happens when the code runs: 


© 


Main Activity starts DelayedMessageService by calling startService() 
and passing it an intent. 

The intent contains the message MainActivity wants 
DelayedMessageService to display. 



MainActivity DelayedMessageService 


© 


DelayedMessageService waits for 10 seconds. 



DelayedMessageService 


O 


DelayedMessageService creates a notification builder and sets 
details of how the notification should be configured. 



icon=sym_def_app_icon 
title="What is the secret of comedy?" 
text="Timing!" 


DelayedMessageService 


NotificationCompat.Builder 


o 


DelayedMessageService creates an intent for MainActivity, which it 
uses to create a pending intent. 



P endinglnte nt 


To: MainActivity 


DelayedMessageService 
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The story continues 



Log 

Display notification 


^ DelayedMessageService adds the pending intent to the notification builder. 



P endinqlnte nt 


To: MainAc+ivity 
DelayedMessageService NotificationCompat.Builder 



icon=sym_def_app_icon 

title="What is the secret of comedy?" 

text="Timing!" 


o 


DelayedMessageService creates a NotificationManager object and 
calls its notifyO method. 

The notification service displays the notification built by the notification builder. 




DelayedMessageService NotificationManager Notification 



icon=sym_def_app_icon 
title="What is the secret of comedy?" 
text="Timing!" 


o 


When the user clicks on the notification, the notification uses its 
pending intent to start MainActivity. 


a 

Notification 


Intent 


-G3—V 


W 

MainActivity 


Now that we’ve gone through what the code does, let’s take the 
app for a test drive. 
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test drive 



Test drive the app 

When you click on the button in MainActivity, a 
notification is displayed after 10 seconds. You’ll receive the 
notification irrespective of which app you’re in. 



Log 

Display notification 



12:49 PM • Wed, Mar 22 

K A Q 

0 

B_ 




i □ 

Q 12:49 W 

A Joke * now 



1 

What is the secret of comedy? 

-► 

Q Joke 



Android System v 

Virtual SD card 

New Virtual SD card detected 

□ Android System 

Configure physical keyboard 
Tap to select language and layout 


What is the secret of comedy? 


CliddfiJ on i\\t no'ta'Pi^d'bion 
stavb Ma'mAfrtwiiy- 



You now know how to create a started service that displays a 
notification using the Android notification service. In the next 
chapter, we’ll look at how you create a bound service. 
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Your Android Toolbox 

You’ve got Chapter 18 under 
your belt and now you’ve 
added started services to your 
toolbox. 



BULLET POINTS 


■ A service is an application component that 
can perform tasks in the background. It doesn’t 
have a user interface. 

■ A started service can run in the background 
indefinitely, even when the activity that started 
it is destroyed. Once the operation is done, it 
stops itself. 

■ A bound service is bound to another 
component such as an activity. The activity can 
interact with it and get results. 

■ A scheduled service is one that’s scheduled to 
run at a particular time. 

■ You can create a simple started service by 
extending the intentService class, 
overriding its onHandlelntent () method 
and adding a public constructor. 

■ You declare services in AndroidManifest.xml 
using the <service> element. 

■ You start a started service using the 
startService () method. 

You tan download 
•the &II Code £ov 
■the Chapter £ro«» 

Wbtfs 1 //"tinyuv-lcom/ - 

HeadFiv-stAndroid- 


When a started service is created, its 
onCreate () method gets called, 
followed by onStartCommand (). If 
the service is an IntentService, 
onHandlelntent () is then called in a 
separate thread. When the service has finished 
running, onDestroy () gets called before 
the service is destroyed. 

The IntentService class inherits 
lifecycle methods from the Service class. 

You log messages using the Android, 
util. Log class. You can view these 
messages in the logcat in Android Studio. 

You create a notification using a notification 
builder. Each notification must include a small 
icon, a title, and some text as a bare minimum. 

A heads-up notification has its priority set to 
high, and vibrates the device or plays a sound 
when it’s issued. 

You tell the notification which activity to start 
when it’s clicked by creating a pending intent 
and adding it to the notification as an action. 

You issue the notification using a notification 
manager. You create a notification manager 
using Android’s notification service. 
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19 bound services and permissions 


^ Bound Together ^ 



Today, CALL_PHONE 
permission. Tomorrow, 
complete world 
domination. Bwahaha... 


Started services are great for background operations, but 
what if you need a service that’s more interactive? in this chapter 
you’ll discover how to create a bound service, a type of service your activity can interact 
with. You’ll see how to bind to the service when you need it, and how to unbind from 
it when you’re done to save resources. You’ll find out how to use Android’s Location 
Services to get location updates from your device GPS. Finally, you’ll discover how to 
use Android’s permission model, including handling runtime permission requests. 
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bound services 


Pound services are bound to other components 

As you saw in Chapter 18, a started service is one that starts 
when it’s passed an intent. It runs code in the background, and 
stops when the operation is complete. It continues running even 
if the component that starts it gets destroyed. 

A bound service is one that’s bound to another application 
component, such as an activity. Unlike a started service, the 
component can interact with the bound service and call its 
methods. 

To see this in action, we’re going to create a new odometer app 
that uses a bound service. We’ll use Android’s location service 
to track the distance traveled: 



On the next page we’ll look at the steps we’ll go through 
to create the app. 
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Here's what we're going to do 

We’re going to build the app in three main steps: 


o 


Create a basic version of a bound service called OdometerService. 

We’ll add a method to it, getDistance (), which will return a random number. 



© 


Get an activity, MainActivity, to bind to OdometerService and call 
its getDistance() method. 

We’ll call the method every second, and update a text view in MainActivity 
with the results. 


getDistanceQ 



MainActivity OdometerService 


o 


Update OdometerService to use Androids Location Services. 

The service will get updates on the user’s current location, and use these to 
calculate the distance traveled. 



OdometerService 


Create a new Odometer project 

We’ll start by creating the project. Create a new Android project for an 
application named “Odometer” with a company domain of “hfad.com”, 
making the package name com. hf ad. odometer. The minimum 
SDK should be API 19 so that it will work with most devices. You’ll need 
an empty activity named “MainActivity” and a layout named “activity_ 
main” so that your code matches ours. Make sure that you uncheck 
the Backwards Compatibility (App Comp at) option when you 
create the activity. 
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create service 

Create a new service 

You create a bound service by extending the Service class. 
This class is more general than the IntentService class 
we used in Chapter 18, which is used for started services. 
Extending Service gives you more flexibility, but requires 
more code. 

We’re going to add a new bound service to our project, so 
switch to the Project view of Android Studio’s explorer, click 
on the com. hf ad. odometer package in the app/src/main/ 
java folder, go to File—>New..., and select the Service option. 
When prompted, choose the option to create a new Service (not 
an Intent Service), and name the service “OdometerService”. 
Uncheck the “Exported” option, as this only needs to be true if 
you want services outside this app to access the service. Make 
sure that the “checkednabled” option is checked; if it isn’t, the 
activity won’t be able to run the app. Then replace the code in 
OdometerService java with this (shown here in bold): 


OdometerService 
MainActivity 
Location Services 


leoo 




New 


Configure Component 


Android Studio 


Creates a new service component and adds it to your 


Class Name 



MnChetk the—^ Exported 

exported 


package com.hfad.odometer; 

import android.app.Service; 
import android.content.Intent; 
import android.os.IBinder; 


Some versions of /\ndv-oid / 

S-tudio may ask you what 
the source language should 
be- l-f prompted, select 
the option to\r Java. 




The tlass extends 
the Sev-vite tlass. 


public class OdometerService extends Service { 

The onBindO method is called v/hen a 
@Override Component wants to bind to the service- 

public IBinder onBind(Intent intent) { 

//Code to bind the service 


□ 

Odometer 

L C3 

app/src/main 

HU 

java_ 

MU 

com. hfad. odometer 

U 


Odometer 

Service.java 


} 


The above code implements one method, onBind (), which 
gets called when a component, such as an activity, wants to bind 
to the service. It has one parameter, an Intent, and returns an 
IBinder object. 

IBinder is an interface that’s used to bind your service to the 
activity, and you need to provide an implementation of it in your 
service code. We’ll look at how you do this next. 


770 Chapter 19 






Implement a binder 


bound services and permissions 

OdometerService 
MainActivity 
Location Services 


You implement the I Binder by adding a new inner class to your 
service code that extends the Binder class (which implements the 
I Binder interface). This inner class needs to include a method 
that activities can use to get a reference to the bound service. 

We’re going to define a binder called OdometerBinder 
that MainActivity can use to get a reference to 

OdometerService. Here’s the code we’ll use to define it: , , , v ._ 

^-N Me* you Create a bound sew.de, you 

public class OdometerBinder extends Binder { pvovide a Binder imple»nen'ta'bion. 

OdometerService getOdometer() { 
return OdometerService.this; 

} 

} 


The activity will use this method to get 
^ ^tcrende to the Odome-tcrServide. 


We need to return an instance of the OdometerBinder in 
OdometerService’s onBind () method. To do this, we’ll create 
a new private variable for the binder, instantiate it, and return it in 
the onBind () method. Update your OdometerService.java code to 
include our changes below: 


import android.os.Binder; - 


We Ye usin^ *tbis e**tra dlass, 
so we need *to import it 


public class OdometerService extends Service { 

^2 WeVe using a pvivate -Pinal variable -Por our IBinder objedt 
private final IBinder binder = new OdometerBinder(); 


□ 

Odometer 

HIT 

app/sre/main 

lo 


public class OdometerBinder extends Binder { 

OdometerService getOdometer () { Y- T V,is is our (Binder implementation 


return OdometerService.this; 


java_ 

Mn 

com. hfad. odometer 

L @ 

Odometer 

Service.java 


} 


@0verride 

public IBinder onBind(Intent intent) { 

return binder ^ , 3 .^ 

} 

} 

We’ve now written all the service code we need to allow 
MainActivity to bind to OdometerService. Next, we’ll add 
a new method to the service to make it return a random number. 
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OdometerService 
MainActivity 
Location Services 


Add a getPistanced method to the service 

We’re going to add a method to OdometerService called 
get Distance (), which our activity will call. We’ll get it to 
return a random number for now, and later on we’ll update it to 
use Android’s location services. 

Here’s the full code for OdometerService.java including this change; 
update your version to match ours: 



package com.hfad.odometer; 


□ 


Odometer 


import android.app.Service; 
import android.content.Intent; 
import android.os.IBinder; 
import android.os.Binder; 

import java.util .Random;^— tVeVe us'rn^ “this e^tva dass, 

so v/C Y\ttd bo impovt it 

public class OdometerService extends Service { 


■ 

app/src/main 

ma 

java 


LQ 

com. hfad. odometer 

L @ 

Odometer 

Service.java 

private final IBinder binder = new OdometerBinder(); 

private final Random random = new Random () us£ a ^ ± 

■to generate random numbers. 

public class OdometerBinder extends Binder { 

OdometerService getOdometer() { 

return OdometerService.this; 

} 


QOverride 

public IBinder onBind(Intent intent) { 
return binder; 

Add the getPistanteO method- 
public double getDistance() { 

return random.nextDouble () ; ReWn a random double. 

} 

} 

Next we’ll update MainActivity so that it uses OdometerService. 
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Update MainActivity's layout 

The next step in creating our app is to get Main Activity to 
bind to OdometerService and call its getDistance () 
method. We’re going to start by adding a text view to 
MainActivity’s layout. This will display the number 
returned by OdometerService’s getDistance () method. 

Update your version of activity_main.xml to reflect our changes: 



OdometerService 
MainActivity 
Location Services 


<?xml version="1.0" encoding="utf-8"?> 

CLinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android" 

xmlns:tools="http://schemas.android.com/tools" 

android:layout_width="match_j?arent" 

android:layout_height="match_parent" 

tools:context="com.hfad.odometer.MainActivity" 

android:orientation="vertical" 

android:padding="16dp"> 


□ 

Odometer 

KT3 

app/src/main 

MB 


co_ 

MT3 

layout 


<TextView 

android:id="@+id/distance 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:textSize="48sp" 

android:layout_gravity="center_horizontal" 
android:textAppearance="?android:attr/textAppearanceLarge 


activity_ 

main.xml 


l/Vc II use -the Te^-tl/ieu/ -fco display 
ihe number reiurned by ibe 
Odome-fcerSevvide getDis ianteO method. 


/> 


</LinearLayout> 

Now that we’ve added a text view to MainActivity’s layout, 
we’ll update its activity code. Let’s go through the changes we 
need to make. 


Of 15:03 


Odometer 
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steps 


What MainActivity needs to do 

To get an activity to connect to a bound service and call its methods, 
there are a few steps you need to perform: 



OdometerService 
MainActivity 
Location Services 



Create a ServiceConnection. 

This uses the service’s I Binder object to form a connection with the service. 



Activity ServiceConnection Service 


© 


Bind the activity to the service. 

Once you’ve bound it to the service, you can call the service’s methods directly. 



Activity Service 


© 


Interact with the service. 

In our case, we’ll use the service’s get Distance () method to 
update the activity’s text view. 


N < 

O ▼ A M 15:03 | 

* * Odometer 



Whe* you\T activity is bouhd_^ 

-to -the service, you £ah use it 
to update you\r activity. 

Q Unbind from the service when you've finished with it. 

When the service is no longer used, Android destroys the service to free up resources. 




We’ll go through these steps with MainActivity, starting with 
creating the ServiceConnection. 
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Create a ServiceConnection 

A ServiceConnection is an interface that enables your activity 
to bind to a service. It has two methods that you need to define: 
onServiceConnected() and onServiceDisconnected(). 
The onServiceConnected () method is called when a connection 
to the service is established, and onServiceDisconnected () is 
called when it disconnects. 

We need to add a ServiceConnection to MainActivity. 
Here’s what the basic code looks like; update your version of 
MainActivity.java to matches ours: 



OdometerService 
MainActivity 
Location Services 


package com.hfad.odometer; 

import android.app.Activity; 
import android.os.Bundle; 
import android.content.ServiceConnection; 
import android.os.IBinder; 
import android.content.ComponentName; 


public class MainActivity extends Activity { 



□ 


Odometer 


lA/eVe using these classes, 
we need to import them- 


KJ 

app/sre/main 

HL3 


WeVe using an Activity 

here, but you dould use 

AppCompatActivity instead. 


Create a 

Servide 

Connection 

object- 


java 

m3 

com.hfad.odometer 

L @ 

Main 

Activity.java 


private ServiceConnection connection = new ServiceConnection() { 

©Override 

public void onServiceConnected(ComponentName componentName, IBinder binder) { 
//Code that runs when the service is connected 


need to de-fine these methods. 


} 

©Override 

public void onServiceDisconnected(ComponentName componentName) { 
//Code that runs when the service is disconnected 

} 


Add MainActivity S onCreateO method- 

©Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

} 


We’ll update the onServiceConnected () and 
onServiceDisconnected () methods on the next page. 
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onServiceConnectedQ 


v 


The onServiceConnectedO method 


OdometerService 
MainActivity 
Location Services 


As we said on the previous page, the onServiceConnected () 
method is called when a connection is established between 
the activity and the service. It takes two parameters: a 
ComponentName object that describes the service that’s been 
connected to, and an I Binder object that’s defined by the service: 


@Override 


The CoroponentNawC identifies 
the servide. It indludes the 
servide \>adka<\e and dlass names. 

/ 

public void onServiceConnected(ComponentName componentName, IBinder binder) { 
//Code that runs when the service is connected 

} This is an (Binder def ined by 

the servide. We added one to 

There are two things we need the onServiceConnected () 
method to do: 

Use its IBinder parameter to get a reference to the service we’re connected to, 
in this case OdometerService. We can do this by casting the IBinder to an 
OdometerService . OdometerBinder (as this is the type of IBinder we 
defined in OdometerService) and calling its getOdometer () method. 


Record that the activity is bound to the service. 

Here’s the code to do these things (update your version of 
MainActivity.java to include our changes): 

public class MainActivity extends Activity { 


a 

Odometer 

H3 

app/src/main 

L Q 


.. . 0 \ Add these variables -to redord 

private OdometerService odometer;\ 7 a ... - i 

) a referende to the servide, and 

private boolean bound = false^ 1S bound to it 


java 


mi 


com.hfad.odometer 

U 


private ServiceConnection connection = new ServiceConnection() { Main 

SOverride Activity.java 

public void onServiceConnected(ComponentName componentName, IBinder binder) { 

OdometerService.OdometerBinder OdometerBinder = 

(OdometerService.OdometerBinder) binder; 
odometer = OdometerBinder. getOdometer () ;^-(X se the IBinder to get a 


bound = true; 

The activity is bound “to *the servide, 
so set the bound variable to true. 


reference to the servide. 


}; 


776 Chapter 19 



bound services and permissions 


The onServicePisconnectedl) method 

The onServiceDisconnected () method is called when the 
service and the activity are disconnected. It takes one parameter, a 
Component Name object that describes the service: 

QOverride 

public void onServiceDisconnected(ComponentName componentName) { 

//Code that runs when the service is disconnected 


v/ 


OdometerService 
MainActivity 
Location Services 


} 


There’s only one thing we need the 

onServiceDisconnected () method to do when it’s called: 
record that the activity is no longer bound to the service. Here’s 
the code to do that; update your version of MainActivity.java to 
match ours: 

public class MainActivity extends Activity { 


private OdometerService odometer; 
private boolean bound = false; 


□ 

Odometer 

4T3 

app/src/main 
1 ■ 


java 

MT3 


com. hfad. odometer 



private ServiceConnection connection = new ServiceConnection() { Main 

@ Override Activity.java 

public void onServiceConnected(ComponentName componentName, IBinder binder) { 
OdometerService.OdometerBinder odometerBinder = 

(OdometerService. OdometerBinder) bindery- 
odometer = odometerBinder.getOdometer(); 
bound = true; 


} 


@0verride 

public void onServiceDisconnected(ComponentName 

bound = false; 


Set Wd to -false, as MainAA'vity * 
no longer bound to Odometev-Sewide- 


componentName) 


{ 


} 


Next we’ll look at how you bind to and unbind from the service. 
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Use bindServiceO to bind the service 


When you bind your activity to a service, you usually do it in 
one of two places: 


o 

o 


In the activity’s onStart () method when the activity becomes 
visible. This is appropriate if you only need to interact with the 
service when it’s visible. 

In the activity’s onCreate () method when the activity gets ^ 
created. Do this if you need to receive updates from the service 
even when the activity’s stopped. 


v/ 


OdometerService 
MainActivity 
Location Services 


Y^u don't usually bind to a service 
'■» the activity's onResum e 0 
method in order to keep the 
processing done in this method to 
a minimum. 


In our case, we only need to display updates from 
OdometerService when MainActivity is visible, so we’ll 
bind to the service in its onStart () method. 

To bind to the service, you first create an explicit intent that’s 
directed at the service you want to bind to. You then use the 
activity’s bindService () method to bind to the service, 
passing it the intent, the ServiceConnection object 
defined by the service, and a flag to describe how you want to 
bind. 



MainActivity 


OdometerService 


To see how you do this, here’s the code you’d use to bind 
MainActivity to OdometerService (we’ll add this code 
to MainActivity.java a few pages ahead): 


□ 

Odometer 


@Override 

protected void onStart () { This is am mtert directed 

■fco -the OdometerService- 

super.onStart(); ^ 

Intent intent = new Intent(this, OdometerService.class); 


HU 

app/src/main 


bindService(intent, connection, Context.BIND_AUTO_CREATE); 

} I s \ 

This is -the SewideConnedtion objedt- ^ The bind£e\rvideO method 

uses the intent and servide 

In the above code, we’ve used the flag Context. BIND_ donnedtion to bind the 

AUTO_CREATE to tell Android to create the service if it doesn’t activity to the service, 

already exist. There are other flags you can use instead; you can 
see all the available ones in the Android documentation here: 


java_ 

com.hfad.odometer 

L @ 

Main 

Activity.java 


https:// developer.android.com/reference/android/ content/Context.html 
Next, we’ll look at how you unbind the activity from the service. 
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Use unbindServiceO 
to unbind from the service 

When you unbind your activity from a service, you usually 
add the code to do so to your activity’s on St op () or 
on Destroy () method. The method you use depends on 
where you put your bindService () code: 



MainActivity Odome+erService 


o 

o 


If you bound to the service in your activity’s onStart () method, 
unbind from it in the on Stop () method. 

If you bound to the service in your activity’s onCreate () 
method, unbind from it in the onDestroyO method. 


In our case, we used MainActivity’s onStart () method 
to bind to OdometerService, so we’ll unbind from it in the 
activity’s on Stop () method. 

You unbind from a service using the unbindService () 
method. The method takes one parameter, the 
ServiceConnection object. Here’s the code that we need to 
add to MainActivity (we’ll add this code to MainActivity.java 
a few pages ahead): 

Odometer 

@Override 

protected void onStopO { 

super. onStop () ; This uses "the SevvidcCoirmed'tion 

obje£*t “to unbind -fvom *tbe service- 

unbindService(connection); 
bound = false; 

When y/e unbind, v/ell sei bound -to -false. 

} Main 

Activity.java 

In the above code we’re using the value of the bound variable 
to test whether or not we need to unbind from the service. If 
bound is true, this means MainActivity is bound to 
OdometerService. We need to unbind the service, and set 
the value of bound to false. 

So far we have an activity that binds to the service when the 
activity starts, and unbinds from it when the activity stops. 

The final thing we need to do is get MainActivity to call 
OdometerService’s getDistance () method, and 
display its value. 


if (bound) { 


* 


Hn 

app/sre/main 


L CZ1 


java 




com.hfad.odometer 

l_Q 
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get distance 


v 


Call OdometerService's getPistanceO method ‘^- J 


Once your activity is bound to the service, you can call its 
methods. We’re going to call the OdometerService’s 
getDistance () method every second, and update 
Main Activity’s text view with its value. 

To do this, we’re going to write a new method called 
displayDistance () . This will work in a similar way to the 
runTimer () code we used in Chapters 4 and 11. 

Here’s our displayDistance () method. Weil add it to 
MainActivity.java a couple of pages ahead: 


OdometerService 
MainActivity 
Location Services 


O * J 15:03 


Odometer 


0.43 miles 

will use *the vesul*U o( 
{he 0dor*e*lev£evvide ytPistandeO 
method to update the Te*tView. 


private void displayDistance () { 

final TextView distanceView = (TextView) findViewById(R.id.distance); 4? ^et the 

T 1\ /* 

final Handler handler = new Handler() — r -~ L - . . 

{ 


handler.post(new Runnable() 

@Override 
public void run() { 

double distance = 0.0; 
if (bound && odometer != null) 


Orta te a new Handler- 
Call the Handler s posiO method, passing in a new Runnable- 


{ 


l-f we've jot a reterer.de to the Odometer2erv.de 
, and we’re bound to it) dall jetPistandeO. 


distance = odometer.getDistance(); 

} 

String distanceStr = String.format(Locale.getDefault(), 


}) 


} 


distanceView. setText (distanceStr) ; 
handler.postDelayed(this, 1000); 

post the dode in the Runnable to be run ajain at ter a delay 
ot I sedond fa this line ot dode is indluded in the Runnable 
runO method, it will run every sedond (with a slight laj). 


"%l$,.2f miles", distance); 

T 

You £ould use a Siring resource (or w miles w , 
bu”t we ve harddoded ii here (or simplidiiy. 


□ 

eter 

Kn 


Odometer 


We’ll call the displayDistance () method in 
MainActivity’s onCreate () method so that it starts 
running when the activity gets created (we’ll add this code to 
MainActivity.java on the next page): 

QOverride 

protected void onCreate(Bundle savedlnstanceState) 


app/sre/main 

'”t3 

com.hfad.odometer 

I_u 


displayDistance (); 


Call displayPistandeO in /WainAdtivity's 
onCreateO method to kidk it otf. 


Main 

Activity.java 


Weil show you the full code for MainActivity on the next page. 
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The full MainActivity.java code 

Here’s the complete code for MainActivity.java ; make sure your 
version of the code matches ours: 



OdometerService 
MainActivity 
Location Services 


package com.hfad.odometer; 


import 

import 

import 

import 

import 

import 

import 

import 

import 

import 


android.app.Activity; 
android.os.Bundle; 

android.content.ServiceConnection; 

android.os.IBinder; 

android.content.ComponentName; 

Were using -these extra classes, 
so we need to import them. 


android.content.Context; 
android.content.Intent; 
android.os.Handler; 
android.widget.TextView; 
java.util.Locale; ^ 


□ 

Odometer 

43 

app/src/main 

MB 


java_ 

MU 


com.hfad.odometer 



Main 

Activity.java 


public class MainActivity extends Activity { 

. . Use this ^or the OdometerService. 

private OdometerService odometer; 

private boolean bound = false; ^ Use this to store whether or not the 

afrtivi-iy s bound -to -the service- 

private ServiceConnection connection = new ServiceConnection() 

@Override 

public void onServiceConnected(ComponentName componentName, IBinder binder) 
OdometerService.OdometerBinder odometerBinder = 

(OdometerService. OdometerBinder) bindery- 
odometer = odometerBinder.getOdometer(); 
bound = true; 


1/V t need -to 
define a 

SewieeConned-tion- 


{ 


^e-t a ve-Pevenee -to -the 
Odorwe-te\rSe\rviee when -the 
service is eonnee-ted- 


} 

@Override 

public void onServiceDisconnected(ComponentName componentName) 
bound = false; 

} 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState); 
setContentView(R.layout.activity_main); 

displayDistance () ;^- Ca || ^ disp | ay DisUceO method 
} when -the ad-tivi-ty is evea-ted- 


The £ode Continues ^ 
on -the nex-t page. 


you are here ► 


781 




code, continued 


v 


The MainActiviiy.java code (continued) 


OdometerService 
MainActivity 
Location Services 


@Override 

protected void onStart() { 
super.onStart(); 

Intent intent = new Intent(this, OdometerService.class); 
bindService(intent, connection. Context.BIND AUTO CREATE); 

> A* 


Bind the sewide v/i^en the adtivity starts- 


@Override 

protected void onStopO { 
super.onStop(); 
if (bound) { 

unbindService(connection); 
bound = false; 


□ 

Odometer 

413 

app/src/main 


java 


} 


} 


vr 


Unbind the servide when the adtivity stops. 
Display the value returned by the 
servides ^etDistandeO method- 


HU 


com. hfad. odometer 

U 


private void displayDistance() { 

final TextView distanceView = (TextView) findViewByld(R. id. distance) ; 
final Handler handler = new Handler(); 
handler.post(new Runnable() { 

@Override 

public void run() { 

double distance = 0.0; 
if (bound && odometer != null) { ^ 

distance = odometer.getDistance(); 

} 


Main 

Activity.java 


Call OdometerServide s 
^etDistdndeO method- 


} 


} 


}); 


} 


String distanceStr = String.format(Locale.getDefault(), 

"%l$,.2f miles", distance); 

distanceView.setText(distanceStr); 
handler.postDelayed(this, 1000) ; 

Update the 7e*t\/iev/s value every sedond- 


That’s all the code you need to get MainActivity to use 
OdometerService. Let’s go through what happens when 
you run the code. 
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What happens when you run the code 

Before you see the app up and running, let’s walk through what the 
code does. 



OdometerService 
MainActivity 
Location Services 


o 


When MainActivity is created, it creates a ServiceConnection object and 
calls the displayDistanceQ method. 



O 


MainActivity calls bindService() in its onStart() method. 

The bindService () method includes an intent meant for OdometerService, and a 
reference to the ServiceConnection. 



o 


Android creates an instance of the OdometerService, and passes it the 
intent by calling its onBindQ method. 



onBindQ 


Android 


OdometerService 
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what happens, continued 


The story continues 



OdometerService 
MainActivity 
Location Services 


O 


OdometerServices onBindQ method returns a Binder. 

The Binder is passed to MainActivity’s ServiceConnection. 



onBindQ 


MainActivity 


ServiceConnection 


OdometerService 


e 


The ServiceConnection uses the Binder to give MainActivity a 
reference to OdometerService. 



OdometerService 


O 


MainActivity's displayDistance() method calls OdometerServices 
getDistance() method every second. 

OdometerService returns a random number to MainActivity, in this case 
0.56. 


getDistanceQ 



MainActivity OdometerService 
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The story continues 


© 


When MainActivity stops, it disconnects from OdometerService by 
calling unbindServiceQ. 




OdometerService is destroyed when MainActivity is no longer bound 
to it. 



MainActivity OdometerService 


Now that you understand what happens when the code 
runs, let’s take the app for a test drive. 
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test drive 

OdometerService 
MainActivity 
Location Services 

When we run the app, a random number is displayed in 
MainActivity. This number changes every second. 


Test drive the app 



This is d \rdhdor* number 
generated by OdometerServiee. 


We now have a working service that MainActivity 
can bind to. We still need to change the service so that 
the getDistance () method returns the distance 
traveled instead of a random number. Before we do that, 
however, we’re going to take a closer look at how bound 
services work behind the scenes. 


tfiereiqre no 

Dumb Questions 


O: What’s the difference between 
a started service and a bound service 
again? 


-^1 A started service is created when an 
activity (or some other component) calls 
startService (). It runs code in the 
background, and when it finishes running, 
the service is destroyed. 


Can a service be both started and 
bound? 



What’s the difference between a 


Binder and an IBinder? 


Yes. In such cases, the service is 
created when startService () or 
bindService () is called. It’s only 
destroyed when the code it was asked to 
run in the background has stopped running, 
and there are no components bound to it. 


An IBinder is an interface. A 
Binder is a class that implements the 
IBinder interface. 


% Can other apps use a service I 
create? 


A bound service is created when the activity 
calls bindService (). The activity 
can interact with the service by calling its 
methods. The service is destroyed when no 
components are bound to it. 


Creating this kind of started-and-bound 
service is more complicated than creating 
a service that’s only started or bound. You 
can find out how to do it in the Android 
documentation: httpsMeveioper.android, 
com/guide/components/services.html. 


Yes, but only if you set its 
exported attribute to true in 
AndroidManifest.xml. 
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The states of a bound service 

When an application component (such as an activity) binds to 
a service, the service moves between three states: being created, 
being bound, and being destroyed. A bound service spends 
most of its time in a bound state. 




Service destroyed 



service object 
has been eveaxed- 


An appka-tion £omponen-i su£h as an 
ac tiv'rty has bound b> the service. The 
sev-viee spends most o( its li-Pedy^le here. 

At this point* the 
sevvide no lonyv exists. 


Just like a started service, when a bound service is created, its 
onCreate () method gets called. As before, you override this 
method if you want to perform any tasks needed to set up the 
service. 

The onBind () method runs when a component binds to 
the service. You override this method to return an IBinder 
object to the component, which it uses to get a reference to the 
service. 

When all components have unbound from the service, its 
onUnbind () method is called. 

Finally, the onDestroy () method is called when no 
components are bound to the service and it’s about to be 
destroyed. As before, you override this method to perform any 
final cleanup tasks and free up resources. 

We’ll take a closer look at how these methods fit into the service 
states on the next page. 


A found service is 
destroyed when 
no components are 
found to it. 
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The bound service lifecycle: from create to destroy 

Here’s a more detailed overview of the bound service lifecycle from 
birth to death. 



onDestroy() 



o 

© 


The component calls bindService() and 
the service gets created. 

The onCreate() method runs immediately 
after the service is created. 

The onCreate () method is where any service 
initialization code should go, as this method 
always gets called after the service has launched 
but before any components have bound to it. 


^ The onBind() method runs when the 
component binds to the service. 

You override this method to return an I Binder 
object, which the component can use to get a 
reference to the service and call its methods. 


0 

0 


The service is bound for most of its life. 

The onUnbind() method runs when all 
components have unbound from the 
service. 


O 


The onDestroyO method is called when 
no components are bound to the service 
and it's about to be destroyed. 

You override this method if you want to perform 
any final cleanup tasks such as freeing up 
resources. 


© 


After the onDestroyO method has run, 
the service is destroyed. 

The service ceases to exist. 


Now that you have a better understanding of how bound services 
work, let’s change our Odometer app so that it displays the actual 
distance traveled by the user. 
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Well use Android's Location Services 
to return the distance traveled 

We need to get our Odometer Service to return the distance 
traveled in its get Distance () method. To do this, we’ll use 
Android’s Location Services. These allow you to get the user’s 
current location, request periodic updates, and ask for an intent to 
be fired when the user comes within a certain radius of a particular 
location. 

In our case, we’re going to use the Location Services to get periodic 
updates on the user’s current location. We’ll use these to calculate 
the distance the user has traveled. 

To do this, we’ll perform the following steps: 



OdometerService 
MainActivity 
Location Services 


© 


Declare we need permission to use the Location Services. 

Our app can only use the Location Services if the user grants our app 
permission to do so. 


© 

© 


Set up a location listener when the service is created. 

This will be used to listen for updates from the Location Services. 


Request location updates. 

We’ll create a location manager, and use it to request updates on the user’s 
current location. 


© 


Calculate the distance traveled. 

We’ll keep a running total of the distance traveled by the user, and return 
this distance in the OdometerService’s getDistance () method. 


o 


Remove location updates just before the service is destroyed. 

This will free up system resources. 


Before we start, we’ll add the AppGompat Support Library to our 
project, as we’ll need to use it in our code. 
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Add the AppCompat Support Library 

To get our location code working properly, there are a couple 
of classes we need to use from the AppCompat Support 
Library, so we’ll add it to our project as a dependency. You do 
this in the same way that you did in earlier chapters. Choose 
File—^Project Structure, then click on the app module and choose 
Dependencies. You’ll be presented with the following screen: 



OdometerService 
MainActivity 
Location Services 


BOO 


Project Structure 


+ - 

SDK Location 
Project 

Developer Se... 
Ads 

Authentic a... 
Notifications 

Modules 


Properties Signing Flavors Build Types 


Dependencies 


Scope 

{lndude=|*.jar] l cT i r= libs} Compile 

and roicfTesECompilef com. and rQid.support.test.espresso: espresso-core. 2.2 .2 
mcom.andrQid.supp on. c onstra i nti constra i nt- 1 ayouti 1.0.2 Compile 

mjunit:junit:4.1Z Test compile 

m com.android.support:appcompat-v7:2S.3.0 Compile 

Y 

Here's the AypComyat S^ort Obrary. 



Android Studio may have already added the AppCompat Support 
Library automatically. If so, you will see it listed as appcompat-v7, 
as shown above. 

If the AppCompat Library isn’t listed, you will need to add it 
yourself. To do this, click on the “+” button at the bottom or right 
side of the screen, choose the Library Dependency option, select 
the appcompat-v7 library, then click on the OK button. Click on 
OK again to save your changes and close the Project Structure 
window. 

Next, we’ll look at how to declare we need permission to use 
Android’s Location Services. 
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declare the permissions you need 

Android allows you to perform many actions by default, but there 
are some that the user needs to give permission for in order for them 
to work. This can be because they use the user’s private information, 
or could affect stored data or the way in which other apps function. 
Location Services is one of those things that the user needs to grant 
your app permission to use. 

You declare the permissions your app requires in AndroidManifest.xml 
using the <uses-permission> element, which you add to the 
root <manifest> element. In our case, we need to access the user’s 
precise location in order to display the distance traveled, so we need 
to declare the ACCESS_FINE_LOCATION permission. To do this, 
you add the following declaration to AndroidManifest.xml (update your 
version of the file to reflect this change): 



OdometerService 
MainActivity 
Location Services 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 

package="com. hfad. odometer"> i 

* , , i^hccdfek^ttcuscrs^tfclodaboii. 

Declare we need a permission. ^ 

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 


Application 


</application> 

</manifest> 

How the app uses the above declaration depends on your app’s target 
SDK (usually the most recent version of Android) and the API level of 
the user’s device: 


□ 

Odometer 



AndroidManifest.xml 


o 

o 


If your target SDK is API level 23 or above, and the user’s device is running 23 
or above, the app requests permission at runtime. The user can deny or 
revoke permission, so whenever your code wants to use the thing that requires 
permission, it needs to check that permission is still granted. You’ll find out how 
to do this later in the chapter. 

If your target SDK is API level 22 or below, or the user’s device is running 22 
or below, the app requests permission when it’s installed. If the user 
denies permission, the app isn’t installed. Once granted, permission can’t be 
revoked except by uninstalling the app. 


Now that we’ve declared that our app needs to know the user’s 
location, let’s get to work on OdometerService. 
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Add a location listener to OdometerService 



OdometerService 
MainActivity 
Location Services 


You create a location listener by implementing the 
LocationListener interface. It has four methods that you need 
to define: onLocationChanged (), onProviderEnabled (), 
onProviderDisabled(), and onStatusChanged(). 
onLocationChanged () gets called when the user’s location has changed. 

We’ll use this method later in the chapter to track the distance the user has 
traveled. The onProviderEnabled (), onProviderDisabled (), and 

onStatusChanged () methods are called when the location provider is - Wt\\ look at location 

enabled, when it is disabled, or when its status has changed, respectively. providers on the next paje- 

We need to set up a location listener when OdometerService is first created, 
so we’ll implement the interface in Odometer Service’s onCreate () 
method. Update your version of OdometerService.java to include our changes below: 


import android.os.Bundle; 

import android, location. LocationListener; \ WeVe using these 
import android, location. Location; extra classes, so we 

need to import them. 

public class OdometerService extends Service { 

private LocationListener listener; —* We Ye using a private variable 

-for the LodationListener so 
other methods dan addess it- 


□ 

Hn 

app/sre/main 

L a 


java 


VJ 


@Override 

public void onCreate () { , ... l- i • 1- — 

Set «*P -the LotaWListenev- 

super. onCreate () ; 1 / 1 _ . 

... T . . z'- . , ''Lota-bo* pava*»e-fcev describes -the 

_ durrent lodation. We II use this later. 

@Override 

public void onLocationChanged(Location location) { 

//Code to keep track of the distance 

> 

Well domplete this dode 
@Override ^ 

public void onProviderDisabled(String argO) {} 


com.hfad.odometer 

U 


Odometer 

Service.java 


@Override 

public void onProviderEnabled(String argO) 


@Override 

public void onStatusChanged(String argO t int argl, Bundle bundle) {} 


We wont use any o£ 
these methods in our 
^^sOdometerServide dode, 
{1 — f but we still need to 
/ dedlare them. 


}; 
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OdometerService 
MainActivity 
Location Services 

and location provider 

To get location updates, we need to do three things: create a 
location manager to get access to Android’s Location Services, 
specify a location provider, and request that the location provider 
sends regular updates on the user’s current location to the 
location listener we added on the previous page. We’ll start by 
getting a location manager. 


We need a location manager 


Create a location manager 


You create a location manager in a similar way to how you 
created a notification manager in Chapter 18: using the 
getSystemService () method. Here’s the code to create 
a location manager that you can use to access Android’s 
Location Services (we’ll add the code to OdometerService’s 
onCreate () method later on): 


<■ 


This is how you addcss -the 
/Wroid location sevvide. 


LocationManager locManager = (LocationManager)getSystemService(Context.LOCATION_SERVICE) 


Specify the location provider 

Next, we need to specify the location provider, which is used to 
determine the user’s location. There are two main options: GPS 
or network. The GPS option uses the device’s GPS sensor to 
establish the user’s location, whereas the network option looks at 
Wi-Fi, Bluetooth, or mobile networks. 


We used -the je-fcSys-temServieeO 
method in Chapter IG to jet addess 
to Android^s noti-Pidation servide- 

□ 

Odometer 

433 


Not all devices have both types of location provider, so you can 
use the location manager’s getBestProvider () method 
to get the most accurate location provider on the device. This 
method takes two parameters: a Criteria object you can 
use to specify criteria such as power requirements, and a flag to 
indicate whether it should currently be enabled on the device. 

We want to use the location provider on the device with the 
greatest accuracy, so we’ll use the following (we’ll add it to 
OdometerService later): 


app/sre/main 

m3 

java_ 

m3 

com. hfad. odometer 

L|3 


Odometer 

Service.java 


String provider = locManager.getBestProvider(new 

Next we’ll get the location provider to send location updates to 
the location listener. 


y 

This gets the r»ost addurate lodatio* 
provider that's available o* the devide. 
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Request location updates... 

You get the location provider to send updates to the location listener 
using the location manager’s requestLocationUpdates () 
method. It takes takes four parameters: the location provider, the 
minimum time interval between updates in milliseconds, the 
minimum distance between location updates in meters, and the 
location listener you want to receive the updates. As an example, 
here’s how you’d request location updates from the location provider 
every second when the device has moved more than a meter: 

The loeaiion provider — 


v/ 


OdometerService 
MainActivity 
Location Services 


locManager.requestLocationUpdates(provider, 1000, 

The time in rwillisedonds 


The distance in meters 

i 

1, listener) — 


The LodationL-istener you 
want to redeive updates 


...but first check that your app has 
permission 


If your app’s target SDK is API level 23 or above, you need to check at 
runtime whether the user has granted you permission to get their current 
location. (As we said earlier in the chapter, if your target SDK is API level 
23 or above, and the user’s device is running one of these versions, the user 
may have installed the app without granting Location Services permission. You 
therefore have to check whether permission’s been granted before running any 
code that requires Location Services, or your code won’t compile.) 

You check whether permission’s been granted using the ContextCompat. 
checkSelf Permission () method. ContextCompat is a class from the 
AppGompat Support Library that provides backward compatibility with older 
versions of Android. Its checkSelf Permission () method takes two 
parameters: the current Context (usually this) and the permission you 
want to check. It returns a value of PackageManager . PERMISSION_ 
GRANTED if permission has been granted. 

In our case, we want to check whether the app’s been granted ACCESS_ 
FINE_LOCATION permission. Here’s the code to do that: 


You da* dbedk your ayy's -target SpK 
version by dboosing Filc Pro^edt 

strudture, dlidking on tbe ayf option, 
and then dboosing Flavors. 

tS 


if 


} 


(ContextCompat.checkSelfPermission(this, 

android. Manifest. permission. ACCESS_FINE_LOCATION) 

== PackageManager.PERMIS SION_GRANTED) { 

locManager.requestLocationUpdates(provider, 1000, 1 , listener); 

ri. before requesting location updates. 


□ 

Odometer 

tl 

app/sre/main 

LQ 

java_ 

l O 

com. hfad.odometer 

L @ 

Odometer 

Service.java 

Cbedk it tbe ACCK£_FINF_L0CAT|0N 
permission bas been yanted••• 


On the next page we’ll show you all the code you need to add to 
OdometerService.java to request location updates. 


794 Chapter 19 



bound services and permissions 


Here's the updated OdometerService code 

Here’s the full code to request location updates (update 
your version of Odometer Service.java to include our changes): 



OdometerService 
MainActivity 
Location Services 


import android.content.Context; 
import android.location.LocationManager; 
import android.location.Criteria; 
import android.support.v4.content.ContextCompat; 
import android.content.pm.PackageManager; 

public class OdometerService extends Service { 


□ 


lA/e re usin$ 
•these extra 

classes, so 
import them. 


Odometer 


L Q 

app/src/main 

La 

java 


WeVe using a private variable (or 

1 t-odation/Wanager so we dan 
private LocationManager locManager ; ^ addess it tron, other methods. 

public static final String PERMISSION_STRING 

= android.Manifest.permission.ACCESS FINE LOCATION; 

f ~ ~ 

|/VeVe adding the permission String as a donstant- 


03 

com.hfad.odometer 

L @ 
Odometer 
Service.java 


QOverride 

public void onCreate() { 

super.onCreate(); 

listener = new LocationListener() { 


6,e t the Lodation/Wanager. 

Chedk 1 ' 

whether locManager = (LocationManager) getSystemService (Context. LOCATION_SERVICE) ; 
we have —^if (ContextCompat.checkSelfPermission (this, PERMISSION_STRING) 
permission. == PackageManager. PERMISSION_GRANTED) { 

£jet the most -_^String provider = locManager. getBestProvider (new Criteria () , true) ; 

adturate location if (provider != null) { 

provider. locManager. requestLocationUpdates (provider , 1000, 1, listener); 

} 'T' 

} Revest updates Pom the lodation frov.deir. 

} 

} 


Next we’ll get our location listener to deal with the location updates. 
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Calculate the distance traveled 


So far, we’ve requested that the location listener be notified when the user’s current 
location changes. When this happens, the listener’s onLocationChanged () 
method gets called. 

This method has one parameter, a Location object representing the user’s 
current location. We can use this object to calculate the distance traveled by keeping 
a running total of the distance between the user’s current location and their last. 

You find the distance in meters between two locations using the Location 
object’s distanceTo () method. As an example, here’s how you’d find the 

distance between two locations called location and last Location: , 

This yes xhc distant 

double distancelnMeters = location. distanceTo (lastLocation) ; ^—* between location a*d 

las-bLota-bo*. 

Here’s the code we need to add to OdometerService to record the distance 
traveled by the user (update your version of OdometerService.java to match ours): 


y/ OdometerService 
y/ MainActivity 

Location Services 


public class OdometerService extends Service 

private static double distancelnMeters; 
private static Location lastLocation = null; 


□ 

Odometer 


Were wsi«5 stat'd variables to store 
tbe distar.de traveled and tbe users 
last lodation so that their values are 
retained when tbe servide is destroyed- 


413 

app/sre/main 

MB 


@0verride 

public void onCreate() { 

super.onCreate(); 
listener = new LocationListener() { 

@0verride 

public void onLocationChanged(Location location) { 

if (lastLocation == null) { 

lastLocation = location;“Ita usevs s-tairt’mj loda*tic 

} 

distancelnMeters += location.distanceTo(lastLocation); 
lastLocation = location; 

} T 

Update tbe distande traveled and the user's last lodation- 


java„ 

43 

com. hfad. odometer 

Odometer 

Service.java 


} 


} 

We’ll use this code to return the distance traveled to MainActivity. 
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Return the miles traveled 



OdometerService 
MainActivity 
Location Services 


To tell MainActivity how far the user has traveled, we need 
to update OdometerService’s getDistance () method. It 
currently returns a random number, so we’ll change it to convert 
the value of the distancelnMeters variable to miles and 
return that value. Here’s the new version of the getDistance () 
method; update your version of it to match ours: 


public double getDistance () { 


Pelete "this 


line- 


□ 

Odometer 

app/src/main 

k n 


} 


return this.distancelnMeters / 1609.344; 

4- 

This donvevts the distance traveled in meters into miles. We tould make this 
tabulation more pret.se it we wanted to, but it's atturate enough tor our purposes. 


java_ 

MB 

com.hfad.odometer 



Finally, we’ll stop the listener getting location updates when the service 
is about to be destroyed. 


Odometer 

Service.java 


Stop the listener getting location updates 

We’re going to stop the location listener getting updates using the 
OdometerService’s onDestroy () method, as this gets called just before 
the service is destroyed. 

You stop the updates by calling the location manager’s removeUpdates () 
method. It takes one parameter, the listener you wish to stop receiving the updates: 

locManager.removeUpdates (listener) stops the location listener getting updates. 

If your app’s target SDK is API level 23 or above, you need to 
check whether the user has granted ACCESS_FINE_LOCATION 
permission before calling the removeUpdates () method. This 
is because you can only use this method if the user’s granted 
this permission, and Android Studio will complain if you don’t 
check first. You check whether permission’s been granted in the 

same way we did earlier, by checking the return value of the y\/c tan only remove the 

ContextCompat. checkSelf Permission () method: updates i-f we have permission. 

*£ y 

if (ContextCompat.checkSelfPermission(this, PERMISSION_STRING) 

== PackageManager.PERMIS SION_GRANTED) { 

locManager.removeUpdates(listener); 

} 


Over the next few pages we’ll show you the full code for 
OdometerService, including the new onDestroy () method. 
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OdometerService code 


The full Odometer$ervice.java code 

We’ve now done everything we need to get OdometerService 
to return the distance traveled. Update your version of 
OdometerService.java to match ours. 



OdometerService 
MainActivity 
Location Services 


package com.hfad.odometer; 


□ 

Odometer 


import android.app.Service; 
import android.content.Context; 
import android.content.Intent; 


KJ 

app/src/main 

HH 


import android.os.Bundle; 
import android.os.IBinder; 

import android. os . Binder; VVeVe ho lohgev- \retu\fhihg 3 vendor* 

w-.ber, SO you dan delete this HP"* 


java_ 


com.hfad.odometer 



import android.location.LocationListener; 
import android.location.Location; 
import android.location.LocationManager; 
import android.location.Criteria; 
import android.support.v4.content.ContextCompat; 
import android.content.pm.PackageManager; 


Odometer 

Service.java 


public class OdometerService extends Service { 

private final IBinder binder = new OdometerBinder (); 

Random (-. ) > Delete the Rar>do 0 objedt, as v/eVe 

private LocationListener listener; usm^ it- 

private LocationManager locManager; 

private static double distancelnMeters; 

private static Location lastLocation = null; 

public static final String PERMISSION_STRING 

= android.Manifest.permission.ACCESS_FINE_LOCATION; 

public class OdometerBinder extends Binder { 

OdometerService getOdometer() { 

return OdometerService.this; 

I The dode dohtihues ^^ 

^ oh the next page. 

798 Chapter 19 





bound services and permissions 


The OdoweterServicejava code (continued) 


s/ OdometerService 
\y MainActivity 


Location Services 


@Override 

public void onCreate() { 


UoY\t 0$ the dodc OY\ 

this fay has chafed- 


Odometer 


□ 


listener = new LocationListener () { 

@Override 


super.onCreate (); 




app/src/main 


L a 


public void onLocationChanged(Location location) 
if (lastLocation == null) { 
lastLocation = location; 


java 




com.hfad.odometer 



distancelnMeters += location.distanceTo(lastLocation); 
lastLocation = location; 


Odometer 

Service.java 


@Override 

public void onProviderDisabled(String argO) { 

} 

@Override 

public void onProviderEnabled(String argO) { 

} 

OOverride 

public void onStatusChanged(String argO, int argl, Bundle bundle) { 

} 


locManager = (LocationManager) getSystemService (Context.LOCATION_SERVICE); 
if (ContextCompat.checkSelfPermission(this, PERMISSION_STRING) 


== PackageManager.PERMISSION_GRANTE D) { 


String provider = locManager.getBestProvider(new Criteria (), true); 
if (provider != null) { 

locManager.requestLocationUpdates(provider, 1000, 1, listener); 


The Code £ohtmues 
ov\ the *ext page. 
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code, continued 


The Odoweter$ervice.java code (continued) 


v/ 


OdometerService 
MainActivity 
Location Services 


QOverride 

public IBinder onBind(Intent intent) { 
return binder; 


□ 

Odometer 

MB 

app/sre/main 

MB 

java 

MB 

com. hfad.odometer 

L @ 

Odometer 

if (ContextCompat.checkSelfPermission(this, PERMISSION_STRING) Service java 
== PackageManager.PERMISSION_GRANTED) { 

locManager. removeUpdates (listener) _S*tof ybtmj locations updates (i-P 

} Y/e have permission to remove them). 

locManager = null7\ g c ± the Ueation/Hanajer and 
listener = null; y LoeationListener variables to null. 


Add the onPest'royO ">ethod- 

@Override 

public void onDestroyO { 
super.onDestroy(); 

if (locManager != null && listener != null) { 


public double getDistance () { 

return this.distanceinMeters / 1609.344; 


} 

Let’s take the app for a test drive. 


tlierepre no 

Dumb Questions 


O: I noticed I can call checkSelf Permission () 
directly in my service without using ContextCompat. Why 
do I have to use the ContextCompat version? 


Because it’s simpler to use. A 

checkSelf Permission () method was added to the 
Context class in API level 23, but this means it’s not available 
on devices running an older version of Android. 
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bound services and permissions 


Tcst drive the app 


v/ 

V 

-ny 


OdometerService 
MainActivity 
Location Services 


When we launch the app, 0.0 miles is initially displayed. When we 
check the app permissions, permission hasn’t been granted to use 
Location Services. You can check this on your device by opening 
the device settings, choosing Apps, selecting the Odometer app, and 
opening the Permissions section: 


Lodation Servides permission 
(or -the app may be yanted on 
your devide by de-fault n “this 
is -the ease, see what happens 
when you switch it oft- 

•l' 



0.00 miles 

t 


<r App permissions 

' ’ Odometer 



When we grant Location permission for the Odometer app and 
return to the app, the location icon is displayed in the status bar, 
and the number of miles traveled increases when we take the device 
for a walk. The location icon disappears when we leave the app: 


The app hasn't been 
panted permission to 
use Lodation Servides. 


N < 

App permissions 

•• 

Odometer 





The lodation idon indi dates 
our devide £jP£ ,s uSC( *' 



The idon 
disappears when 


^^we leave the app. 



Location 


We've switdhed on 
Lodation permissions 


4.02 miles 

r 

The number o-p miles 
indreases when we take 
the devide -for a walk. 


The odometer works when we grant the app Location permission, 
but doesn’t when permission’s been denied. 
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801 












request permission 


fret the app to request permission 

So far, we’ve made OdometerService check whether it has 
permission to get the user’s precise location. If permission’s been 
granted, it uses the Android Location Services to track the distance 
the user travels. But what if permission hasn’t been granted? 

If the app doesn’t have permission to get the user’s precise location, 
OdometerService can’t use the Location Services we require. 
Rather than just accepting this, the app would work better if it were 
to ask the user to grant the permission. 

We’re going to change MainActivity so that if the user hasn’t 
granted the permission we need, we’ll request it. To achieve this, 
we’ll get MainActivity to do three things: 


© 


Before MainActivity binds to the service, request ACCESS_FINE. 
LOCATION permission if it's not already been granted. 

This will present the user with a permission request dialog. 


o 

o 



This dialog appears when you v-eguest 

ACCrss_W_U>CAT|0N 

permission at runtime- 


Check the response, and bind to the service if permission is granted. 


If permission is denied, issue a notification. 


We'll issue this noti-fidation 
it the user doesn't grant ^ 
the permission we need- 



Let’s start by looking at how you make an activity request permissions 
at runtime. 
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bound services and permissions 


Check permissions at runtime 

Earlier in the chapter, you saw how to check whether 
the user has granted a particular permission using the This £ode dbetks whether the 

ContextCompat. checkSelf Permission () method: -user has granted a permission- 

if (ContextCompat.checkSelfPermission(this, PERMISSION_STRING) 

== PackageManager.PERMISSION_GRANTE D) { 

//Run code that needs the user's permission 


Request 

Granted 

Denied 


If the user has granted permission, the method returns a value 
of PackageManager . PERMISSION_GRANTED, and the 
code requiring the permission will run successfully. But what if 
permission has been denied? 


Ask for permissions you don't have 

If the user hasn’t granted one or more permissions needed 
by your code, you can use the ActivityCompat. 
requestPermissions () method to request permission at 
runtime. ActivityCompat is a class from the AppGompat 
Support Library that provides backward compatibility with 
older versions of Android. Its requestPermissions () 
method takes three parameters: a Context (usually this), 
a String array of permissions you want to check, and an int 
request code for the permission request. As an example, here’s 
how you’d use the method to request the ACCESS_FINE_ 
LOCATION permission: 


The request Permissions!) 
method can only he called 
hy an activity. It can’t he 
called from a service. 

This is the ve«\uest tode toy 
Use this method to the permissions request- It ten 
request permissions be any int- You II see where this 
at runtime- yts used in a douple o-f pages- 


ActivityCompat. requestPermissions (this , 

new String[] {android.Manifest.permission.ACCESS_FINE_LOCATION} , 6854) ; 


When the requestPermissions () method is called, it 
displays one or more dialogs asking the user for each permission. 
The dialog gives the user a choice between denying or allowing 
the permission, and there’s also a checkbox they can check if they 
don’t want to be asked about the permission again. If they check 
the checkbox and deny the permission, subsequent calls to the 
requestPermissions () method won’t display the dialog. 

Note that the requestPermissions () method can only be 
called from an activity. You can’t request permissions from a service. 

We’re going to update MainActivity so that it requests 
permission to get the device’s location if it hasn’t already been 
granted. 


This is ibc permissions request dialog. 



The usev- can deny or allow 
permissions usin^ these options. 

you are here ► 
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onStartQ 


Check for Location Services permissions 
in MainActivity's onStartO method 



Request 

Granted 

Denied 


We’re currently using MainActivity’s onStart () method to 
bind the activity to OdometerService. We’re going to change the 
code so that Main Activity only binds to the service if the user 
has granted the permission specified by the PERMISSION_STRING 
constant we defined in OdometerService. If permission’s not been 
granted, we’ll ask for it. 

Here’s the updated code for MainActivity.java ; update your version of 
the code with our changes: 


import android.content.pm.PackageManager; 
import android.support.v4.app.ActivityCompat; 
import android.support.v4.content.ContextCompat; 

public class MainActivity extends Activity { 


private final int PERMISSION_REQUEST_CODE = 698; 

l/Vc II use "this iirrt *Cor -the 
permission request dode- 


V\feVe using these e%tra diasses, 
so WC need to import them. 


□ 


Odometer 


4H 

app/sre/main 

HD 

java 


HD 

com. hfad.odometer 

L @ 

Main 

Activity.java 


@Override 

protected void onStartO { A ,, , , , L , 

|t permission hasn t already been eyranted- 

super.onStart(); ^ 

if (ContextCompat.checkSelfPermission(this, OdometerService.PERMISSION_STRING) 
!= PackageManager.PERMISSION_GRANTED) { 

Activi tyCompat. requestPermis s ions (this,^ —-—request it at runtime- 
new String[]{OdometerService.PERMISSION_STRING}, 

PERMISSION_REQUEST_CODE); 


} 


} 


} else { 

Intent intent = new Intent(this 
bindService(intent, connection. 


} 


l-p permission has already been 
granted, bind to the servide- 


OdometerService.class); 
Context.BIND AUTO CREATE); 


Once you’ve requested permission from the user, you need to 
check the user’s response. We’ll do that next. 
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bound services and permissions 


Request 
Granted 
Denied 

When you ask the user to grant a permission using the 
request Permissions () method, you can’t determine whether 
permission was granted by checking its return value. That’s because 
the permission request happens asynchronously so that the current 
thread isn’t blocked while you wait for the user to respond. 

Instead, you check the user’s response by overriding the activity’s 

onRequestPermissionsResult () method. This has three 
parameters: an int request code to identify the permissions request, 
a String array of permissions, and an int array for the results of the 
requests. 

To use this method, you first check whether the int request code 
matches the one you used in the request Permissions () 
method. If it does, you then check whether the permission has been 
granted. 


Check the user's response to the permission request 


The code below checks whether the user granted the permission 
we requested using the request Permissions () method 
on the previous page. If permission’s been granted, it binds 
to OdometerService. Add this method to your version of 

MaznActivitjjava: The onRe^ermissionsRe».lt() «*thod 

@ Override returns the results ot your permissions requests. 

public void onRequestPermissionsResult(int requestCode, 

String permissions[], int[] grantResults) { 

switch (requestCode) { ^-Check whether the iode matches the one 

case PERMISSION_REQUEST_CODE : { we used in our re<\uesiPermissionsO method- 
if (grantResults.length > 0 

l-P -the request was_^ && grantResults [0] == PackageManager. PERMISSION_GRANTED) { 

Handel led, no results Intent intent = new Intent (this, OdometerService . class) ; 
will be returned- bindService (intent, connection, Context .BIND_AUTO_CREATE) 

} else { “- 


//Code to run if permission was denied 

T 

I/Ve s-till need to write "this £ode- 


□ 

Odometer 


} 


Finally, if the user doesn’t give us permission to use their current 
location, we need to inform them that the odometer won’t work. 


HH 

app/src/main 

HH 

java 


l-p permission was 
granted, bind bo 
the service. 


com.hfad.odometer 

L @ 

MainActivity.java 
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we want a notification 


Issue a notification if we're denied permission 

If the user decides not to grant permission to use their current 
location, the OdometerService won’t be able to tell how 
far they’ve traveled. If this happens, we’ll issue a notification to 
inform the user. We’re going to use a notification because it will 
remain in the notification area until the user has decided what to 
do. Another advantage of using a notification is that we can get 
it to start Main Activity when it’s clicked. Doing this means 
that MainActivity’s onStart () method will run, which will 
again prompt the user to grant the permission (unless the user has 
previously selected the option not to be asked again). 

See if you can build the notification we require by having a go at the 
exercise on the next page. 


v 

v/ 


Request 

Granted 

Denied 


We’ll issue "this no-ti-fication 
it -the user denies permission- 

\£ 


# Odometer • now 


Odometer 


Location permission required 


^ w • | 


tliereiftre no 

Dumb Questions 


O: I tried turning off Location permissions for the Odometer 
app when I was in the middle of using it, and the number of 
miles displayed went back to 0. Why? 

When you switch off the Location permissions for the app, 
Android may kill the process the app is running in. This resets all of 
the variables. 

Q.: That sounds drastic. Are there any other times when 
Android might kill a process? 

Yes, when it’s low on memory, but it will always try to keep 
alive any processes that are actively being used. 

Q.: Why aren’t we calling the 
requestPermissions () method from 
OdometerService? 

Because the requestPermissions () method is 
only available for activities, not services. 

% Can I change the text that’s displayed in the 
requestPermissions () dialog? 

No. The text and options it displays are fixed, so Android 
won’t let you change them. 
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% But I want to give the user more information about why I 
need a particular permission. Can I do that? 

One option is to call the ActivityCompat. 
shouldShowRequestPermissionRationale() 

method before calling requestPermissions (). This 
returns a true value if the user has previously denied the 
permission request, and hasn’t checked the checkbox to say they 
don’t want to be asked again. If this is the case, you can give 
the user more information outside the permission request before 
requesting the permission again. 

% What other permissions do I have to declare and ask 
permission for? 

Generally, you need the user’s permission for any actions that 
use private data or may affect the way in which other apps function. 
The online documentation for each class should indicate whether a 
permission is needed, and Android Studio should highlight this too. 
You can find a full list of actions requiring permissions here: 

https:/'/developer, android, com/guide/topics/permissions/requesting. 
html#normal-dangerous 

% What if I design an app that performs these kinds of 
actions and don’t ask for permission? 

If your target SDK is API level 23 or above and you don’t 
request permission, your code won’t compile. 











bound services and permissions 



Poo] plizzje 

Your goal is to build and issue a heads- 
up notification. The notification 
should start MainActivity 
when it's clicked, then disappear. 
Take code snippets from the pool, 
and place them in the blank lines 
in the code. You may not use the 
same snippet more than once, and 
you won't need to use all the snippets. 


Wvite to&t -bo 
tv-eaie ibis noii-fidaiion- 

V 



NotificationCompat.Builder builder = new NotificationCompat.Builder(this) 

. setSmalllcon (android.R.drawable . ic_menu_compass) ^ built-in dvdwdble to 

. setContentTitle ("Odometer" ) display 3 to r*pass idorv 

.setContentText("Location permission required") 

.setPriority(NotificationCompat. ) 

.setVibrate(new long[] { 0 , 1000 }) 

(true); 


Intent actionlntent = new Intent(this, MainActivity.class); 

Pendinglntent actionPendinglntent = Pendinglntent. (this, 0, 

actionlntent, Pendinglntent.FLAG_UPDATE_CURRENT); 
builder.setContentlntent( ); 


NotificationManager notificationManager = 

(NotificationManager) getSystemService( ); 

notificationManager.notify(43, ) ; 

Note: each thing from 
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solution 



Pda] plizzjc 

Your goal is to build and issue a heads- 
up notification. The notification 
should start MainActivity 
when it's clicked, then disappear. 
Take code snippets from the pool, 
and place them in the blank lines 
in the code. You may not use the 
same snippet more than once, and 
you won't need to use all the snippets. 



NotificationCompat.Builder builder = new NotificationCompat.Builder(this) 

.setSmalllcon(android.R.drawable.ic_menu_compass) 

.setContentTitle("Odometer") 

.setContentText("Location permission required") 

. setPriority (Notif icationCompat. PRIORITY_HIGH ) Heads-up notifications 
This makes the . setVibrate (new long [ ] {0, 1000 }) heed to have a high priority. 

rtoti-ficaW disappear-^. setAutoCancel (true); 

whe* its clicked. Create a Pendinglntent using 

Intent actionlntent = new Intent (this, MainActivity. class) ; getActivityO method 

Pendinglntent actionPendinglntent = Pendinglntent. getActivity (this, 0, 

actionlntent, Pendinglntent.FLAG_UPDATE_CURRENT); 
builder. setContentlntent ( actionPendinglntent ) ;^»Add the Pendinglntent to the notification so 

that it starts MainActivity v/hen it's clicked- 


NotificationManager notificationManager = 

(NotificationManager) getSystemService( 
notif icationManager. notify (43, builder.build() ); 




Build the notification. 


NOTIFICATION_SERVICE ) ; 


t 

Use the notif ication service- 
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bound services and permissions 


Add notification code to 
onRequestPermissionsResultsO 

We’ll update our MainActivity code so that if the user denies 
our permission request, it issues a heads-up notification. 


Request 

Granted 

Denied 


□ 

Odometer 

HD 



First, add the following Strings to Strings.xml] we’ll use these for the 
notification’s title and text: 


app/src/main 

i_n 

/Wroid Studio ™ay have \ - ) 


<string name="app_name">Odometer</string> ^— already added this Str’m^ 


res 


<string name= M permission_denied M >Location permission required</string> 

Then update your version of MainActivity.java with the following 
code: 


values 



strings.xml 


□ 


Odometer 


import android.support.v4.app.NotificationCompat; 

import android.app.NotificationManager; |_P 1 

import android, app. Pendinglntent; ^--''WfcVe using these extra diasses, appfe^/main 

so we weed ho import them. 

public class MainActivity extends Activity { 




java 


private final int NOTIFICATION_ID = 423; ^— Wit'll use -this Constant 

•for the ho-titida-tioh IP- 


LQ 


com. hfad.odometer 

L @ 

Main 

Activity.java 


@Override 

public void onRequestPermissionsResult(int requestCode, 

String permissions[], int[] grantResults) { 

switch (requestCode) { 

case PERMISSION_REQUEST_CODE: { 

if (grantResults.length > 0 

&& grantResults[0] == PackageManager.PERMISSION_GRANTED) { 


} else { 

//Create a notification builder 

NotificationCompat.Builder builder = new NotificationCompat.Builder(this) 
.setSmalllcon(android.R.drawable.ic_menu_compass) 

These setfcihgs are heeded < * setContentTitle (getResources () . getString (R. string. app_name)) 

-for all ho-fci-pieaiiohs. . setContentText (getResources () .getString (R. string.permission_denied)) 

. . . CTsetPriority(NotificationCompat.PRIORITY_HIGH) 

(1000, 1000), 

heads-up noti-Uation. C y on-the next page 

. setAutoCancel (true) ; ^- TV|S | me „, akes ^ 

disappear when i*ts clicked- you are here ► 
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code, continued 


The notification code (continued) 



Request 

Granted 

Denied 


//Create an action 


Intent actionlntent = new Intent(this, MainActivity.class); 


Pendinglntent actionPendinglntent = Pendinglntent.getActivity( 


Adding a Pendinglrrtent to 
the noti-fieation means that 
it 'will start MainAdtivity 


J' 


when ii's disked- 


\ 


this, 

0, 

actionlntent, 

Pendinglntent.FLAG_UPDATE_CURRENT); 


builder.setContentlntent(actionPendinglntent); 


//Issue the notification 


Build the 
noti-Citation 
and issue it- 


NotificationManager notificationManager = 

< (NotificationManager) getSystemService(NOTIFICATION_SERVICE) 

notificationManager.notify(NOTIFICATION_ID, builder.build()); 


} 


} 


} 


That’s all the code we need to display a notification if the user 
decides to deny us ACCESS_FINE_LOCATION permission. 
We’ll show you the full MainActivity code over the next 
few pages, then take the app for a final test drive. 


□ 

Odometer 

4 B 

app/sre/main 

MB 

java_ 

ku 

com.hfad.odometer 

LQ 


Main 

Activity.java 
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bound services and permissions 


The full code for MainActivity.java 

Here’s our complete code for MainActivity.java ; make sure your version 
of the code matches ours: 



Request 

Granted 

Denied 


package com.hfad.odometer; 


□ 

Odometer 


import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

import 

public 


4 B 

app/src/main 

java 


android.app.Activity; 
android.os.Bundle; 

android.content.ServiceConnection; 
android.os.IBinder; 
android.content.ComponentName; 
android.content.Context; 
android.content.Intent; 
android.os.Handler; 
android.widget.TextView; 
j ava.util.Locale; 

android.content.pm.PackageManager; 
android.support.v4.app.ActivityCompat; 
android.support.v4.content.ContextCompat; 
android.support.v4.app.NotificationCompat; 
android.app.NotificationManager; 

android.app.Pendinglntent; } 

— We vc been using the Activity 
Ir* dlass, but you dan use 

class MamActivity extends Activity { a /> / A , , n * 

AfpCompatA^tivi-ty it you pve-fev. 


LQ 

com. hfad. odometer 

L @ 

Main 

Activity.java 


These ave all classes £v-om the 
AppCompat Support Uhvav-y- 


private OdometerService odometer; 
private boolean bound = false; 

private final int PERMISSION_REQUEST_CODE = 698; We need a Sev-videConnedtion 

private final int NOTIFICATION_ID = 423; in ovdev to bind MainA^tivity 

^-to 0dor*etev£evvide. 

private ServiceConnection connection = new ServiceConnection() { 

QOverride 

public void onServiceConnected(ComponentName componentName, IBinder binder) 
OdometerService.OdometerBinder odometerBinder = 

(OdometerService. OdometerBinder) bindery- 
odometer = odometerBinder.getOdometer(); 
bound = true; 


{ 


} 

QOverride 

public void onServiceDisconnected(ComponentName componentName) 
bound = false; 

} 


The dode 
dontinues 
on the 
next page. 
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Main Activity, continued 


The MainActiviiyjava code (continued) 

OOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout.activity_main); 
displayDistance(); 

} 


v/ 

v/ 


Request 

Granted 

Denied 


□ 

Odometer 

app/src/main 

'-m 

java 

ms 

com.hfad.odometer 

LQ 


LJ 

Main 

Activity.java 


l-f we've asked the <»se\r •&*" permissions 
at runtime, dhedk the result- 

QOverride 

public void onRequestPermissionsResult(int requestCode, 

String permissions[], int[] grantResults) 

switch (requestCode) { 

case PERMISSION_REQUEST_CODE: { 

Bihd "to if (grantResults . length > 0 

the service && grantResults [0] == PackageManager. PERMISSION_GRANTED) { 

i-P the user Intent intent = new Intent(this, OdometerService.class); 

has grafted -—^-bindService(intent, connection. Context.BIND_AUTO_CREATE); 

permission. } else { 

//Create a notification builder 

f NotificationCompat.Builder builder = new NotificationCompat.Builder(this) 


Issue a 
notification 






.setSmalllcon(android.R.drawable.ic_menu_compass) 

.setContentTitle(getResources().getString(R.string.app_name)) 

.setContentText(getResources().getString(R.string.permission_denied)) 
.setPriority(NotificationCompat.PRIORITY_HIGH) 

.setVibrate(new long[] { 1000, 1000}) 

.setAutoCancel(true); 
i-p permissions / //Create an action 

been denied. 1 Intent actionlntent = new Intent(this, MainActivity.class); 

/ Pendinglntent actionPendinglntent = Pendinglntent.getActivity(this, 0, 

/ actionlntent, Pendinglntent.FLAG_UPDATE_CURRENT); 

/ builder.setContentlntent(actionPendinglntent) ; 

//Issue the notification 

NotificationManager notificationManager = 

\ (NotificationManager) getSystemService(NOTIFICATION_SERVICE); 


\ notificationManager.notify(NOTIFICATION_ID, builder.build()); 


} 


The Code Continues 
on the next pager—^ 
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bound services and permissions 


The MamActivity.java code (continued) 


V 

v/ 


Request 

Granted 

Denied 


{ 


Request ACCESS^ 

fine_l ochjm 

permission i-f we 
&or!{, have it 

already. 


{ 


OOverride 

protected void onStartO 
super.onStart() ; 

if (ContextCompat.checkSelfPermission(this, 

OdometerService.PERMISSION_STRING) 

!= PackageManager.PERMIS SION_GRANTED) 
ActivityCompat.requestPermissions(this, 

new String[]{OdometerService.PERMISSION_STRING}, 
PERMIS SION_REQUE S T_C ODE) ; 

} else { 

Intent intent = new Intent(this, OdometerService.class); 
bindService(intent, connection. Context.BIND AUTO CREATE), 

} ^ 

I Bind to OAo meterServide 

i-f we ve been granted 

n -the Permission it requires. 

@Override 1 v 

protected void onStopO { 
super.onStop(); 
if (bound) { 

unbindService(connection) ; < 
bound = false; 

} 

^ Display *the distande traveled- 

ir 

private void displayDistance() { 


□ 

leter 

■ 


WeVe binding to 
OdometerServide 
in two different 
plades, so you dould 
put “this dode in a 
separate method- 


Odometer 


Unbind -from 
* OdometerServide 
when /VJainAdtivity 

stops. 


app/sre/main 

MB 

java_ 

LQ 

com.hfad.odometer 

U 


Main 

Activity.java 


final TextView distanceView = (TextView)findViewByld(R.id.distance); 
final Handler handler = new Handler(); 
handler.post(new Runnable() { 

@Override 

public void run() { 

double distance = 0.0; 
if (bound && odometer != null) { 

distance = odometer.getDistance (); 


} 

String distanceStr = String.format(Locale.getDefault(), 

M %1$,.2f miles’ 

distanceView.setText(distanceStr); 
handler.postDelayed(this, 1000); 


distance); 


}) ; 


} 
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test drive 


Test drive the app 

When we run the app with its Location permission switched off, 
a permission request dialog is displayed. If we click on the Deny 
option, a notification is issued: 


l-f we've not granted 
permission, a dialog is 
displayed reguesting it- 


9 

Allow Odometer to 

access this device's 
location? 

l~1 Dont ask again 


DENY ^mllUW 


v/ 

v/ 

-►0 




|-f vie deny permission, a 
noti-Cidation is issued- 


^ Odometer • now 

Odometer 

Location permission required 


0.00 miles 


Request 

Granted 

Denied 


When we click on the notification, the permission request dialog is 
displayed again. If we click on the option to allow permission, the 
Location icon appears in the status bar and the number of miles 
increases when we take the device on a road trip: 


15:59 • Wed, 22 Mar 


0 V 

A- XJ 

▼ A EJ 

O 



The dialog is displayed 
again when we click on 
•the notification. 


^ Odometer • now 



w 

Location permission required 

N Android System 


USB debugging connected 


Tap to disable USB debugging. 


1 _ 


Q Allow Odometer to 

access this device's 
location? 

I I Don't ask again 

DENY ALLOW « 



1.13 miles 


The number of miles 
increases if we go on a walk. 


We tnow you’re full of great ideas for improving 
die Odometer app, so why not try them out? As an 
example, try adding Start, Stop, and Reset buttons 
to start, Stop, and reset die distance traveled. 
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bound services and permissions 



Your Android Toolbox 

You’ve got Chapter 19 under 
your belt and now you’ve 
added bound services to your 
toolbox. 


You tan download 
-the -Cull tode tar 
•the chapter taom 
h-btfs:// ‘tinytA'rl-tow*/ 

Headfirs-tAndvoid 



BULLET POINTS 


■ You create a bound service by extending 
the Service class. You define your 
own Binder object, and override the 
onBind() method. 


To get the current location of the device, 
you need to declare that the app requires 
acce s s_fine_locat i on permission 
in AndroidManifest.xml. 


■ Bind a component to a service using the 
bindService () method. 


Get location updates using a 

LocationListener. 


Use a ServiceConnection so that ■ 

your activity can get a reference to the service 
when it’s bound. 

Unbind a component from a service using the 
unbindService () method. 

When a bound service is created, its 

■ 

onCreate () method is called. 
onBind () gets called when a component 
binds to the service. ■ 

When all components have unbound from the 
service, its onUnbind () method is called. 

A bound service is destroyed when 
no components are bound to it. Its 
onDestroy () method is called just before 
the service is destroyed. 

Use the Android Location Services to 

■ 

determine the current location of the device. 


A LocationManager gives you access 
to Android’s Location Services. Get the best 
location provider available on the device 
using its getBestProvider () method. 
Request location updates from the provider 
using requestLocationUpdates (). 

Use removeUpdates () to stop getting 
location updates. 

If your target SDK is API level 23 or 
above, check at runtime whether your 
app has been granted a permission 
using the ContextCompat. 
checkSelfPermission () method. 

Request permissions at runtime 
using ActivityCompat. 
requestPermissions(). 

Check the user’s response to a permission 
request by implementing the activity’s 

onRequestPermissionsResult() 

method. 


you are here ► 


815 









Leaving town... 



It's been great having you here in Androidville 

We’re sad to see you leave, but there’s nothing like taking what you’ve learned 
and putting it to use. There are still a few more gems for you in the back of the book and a 
handy index, and then it’s time to take all these new ideas and put them into practice. Bon 
voyage! 




appendix i: 



relative and grid layouts 

Meet the Relatives V 



There are two more layouts you will often meet in Androidville. 

In this book we’ve concentrated on using simple linear and frame layouts , and introduced 
you to Android’s new constraint layout. But there are two more layouts we’d like you to 
know about: relative layouts and grid layouts. They’ve largely been superseded by the 
constraint layout, but we have a soft spot for them, and we think they’ll stay around for a 
few more years. 


this is an appendix 
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relative layout 


A relative layout displays views 
in relative positions 

A relative layout allows you to position views relative to their parent 
layout, or relative to other views in the layout. 

You define a relative layout using the <RelativeLayout> element 
like this: 


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android: layout_width="match_j?arent"^ The layou*t_wid*th and layou*t__hei^irb spedi-fy 

android: layout_height="match_parent"h) Slz * V ou ^ 

‘ ‘ > ^ There may be o-ther attribu-tes -fcoo. 

... ^-^This is where you add any views. 


</RelativeLayout> 


Positioning views relative to the parent layout 

If you want a view to always appear in a particular position on the screen, 
irrespective of the screen size or orientation, you need to position the 
view relative to its parent. As an example, here’s how you’d make sure a 
button always appears in the top-center of the layout: 


f 


The layout 
Contains the 
button, so the 
layout is the 
button’s parent 


<RelativeLayout ... > 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/click_me" 

android:layout_alignParentTop="true" 
android:layout_centerHorizontal="true" 

</RelativeLayout> 


lay°ut_a I i ^nPare ntTop 

V 


/> 



layout_£entev-tt orizjorrlal 


The lines of code: 


android:layout_alignParentTop="true" 
android:layout_centerHorizontal="true" 

mean that the top edge of the button is aligned to the top edge of the 
layout, and the button is centered horizontally in the parent layout. This 
will be the case no matter what the screen size, language, or orientation 
of your device: 


818 Appendix i 








relative and grid layouts 


Positioning views to the left or right 


You can also position a view to the left or right of the parent 
layout. There are two ways of doing this. 

The first way is to explicitly position the view on the left or right 
using: 

android: layout_alignParentLef t= M true" 

or: 

android:layout_alignParentRight="true" 

These lines of code mean that the left (or right) edge of the view is 
aligned to the left (or right) edge of the parent layout, regardless of 
the screen size, orientation, or language being used on the device. 


layou't^ali^nPavc^'tLc'f't— w *tv-uc w 




ahd\roid-layoui — alijhPav-ch-tRigh-t-^uc' 


Use start and end to take language direction into account 

For apps where the minimum SDK is at least API 17, you can 
position views on the left or right depending on the language 
setting on the device. As an example, you might want views to 
appear on the left for languages that are read from left to right 
such as English. For languages that are read from right to left, 
you might want them to appear on the right instead so that their 
position is mirrored. 

To do this, you use: 

android:layout_alignParentStart="true" 

or: 

android:layout_alignParentEnd="true" 


android: layout_alignParentStart="true" aligns the 
start edge of the view with that of its parent. The start edge is on 
the left for languages that are read from left to right, and the right 
edge for languages that are read from right to left. 


android: layout_alignParentEnd= n true" aligns the 
end edge of the view with that of its parent. The end edge is on 
the right for languages that are read from left to right, and the left 
edge for languages that are read from right to left. 


a»dv-oid:laYou0 li ^ pa ' re ’ ,,tSta ' rt " U ‘ t ' rw f 


For le-Pt-to- 
right languages. 


For vight-to- 
le-p-i languages. 


The view appears 
OY\ "the le-P-t or ■the 
right depending on 
■the direction o( 
■the language used 
on -the deviee- 


andvoid:layout_alignPayentEnd- l ^ue w 


F» left-fe- 

right languages. 
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relative to parent 


Attributes for positioning views 
relative to the parent layout 

Here are some of the most common attributes for positioning 
views relative to their parent layout. Add the attribute you want 
to the view you’re positioning, then set its value to "true 

android:attribute="true" 


Attribute 

layout.alignParentBottom 


layout.alignParentLeft 


layout.alignParentRight 


layout.alignParentTop 


What it does 

Aligns the bottom edge of the view 
to the bottom edge of the parent. 


Aligns the left edge of the view to 
the left edge of the parent. 


Aligns the right edge of the view to 
the right edge of the parent. 


Aligns the top edge of the view to 
the top edge of the parent. 


The view is aligned to 
the parents le*ft and 

bottom edg 

es. 


CLICK ME 



\ 




CLICK ME 


f 

The view is aliped 
to -the parents right 
a*d "top edges. 


layout.alignParentStart 


layout.alignParentEnd 


layout.centerlnParent 


layout.centerHorizontal 


layout_centerVertical 


Aligns the start edge of the view to 
the start edge of the parent. 


Aligns the end edge of the view to 
the end edge of the parent. 


Centers the view horizontally and 
vertically in the parent. 


Centers the view horizontally in the 
parent. 


Centers the view vertically in the 
parent. 



CLICK ME 


CLICK ME 


CLICK ME 

sU 


>The start 

is on "the 

Ic-f-b a*d 

-the end is 
on *the right 

-for Ic-C't— 

to—right 

languages. 

This is 

reversed 

-for right- 

to-lett 

languages. 
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relative and grid layouts 


Positioning views relative to other views 

In addition to positioning views relative to the parent layout, you can also 
position views relative to other views. You do this when you want views to stay 
aligned in some way, irrespective of the screen size or orientation. 

In order to position a view relative to another view, the view you’re using as an 
anchor must be given an ID using the androidrid attribute: 

android:id= M @+id/button click me" 


The syntax “@+id” tells Android to include the ID as a resource in its resource 
file R.java. You must include the “+” whenever you define a new view in the 
layout. If you don’t, Android won’t add the ID as a resource and you’ll get errors 
in your code. You can omit the “+” when the ID has already been added as a 
resource. 

Here’s how you create a layout with two buttons, with one button centered in the 
middle of the layout, and the second button positioned underneath the first: 

VVcVc us'm$ *fchis button as an andhov- 
<RelativeLayout . . . > ^ setond one, so it needs an IP- 

<Button 0, 

android: id=" @+id/button_click_me" 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerInParent="true" 
android:text="Click Me" /> 


<Button 

android:layout_width="wrap_content" 

android:layout_height="wrap_content" // 

android:layout_alignStart="@id/button_click_me 
android:layout_below="@id/button_click_me" 

android:text="New Button" /> 

</RelativeLayout> 


i n 'a Q 5:37 

Relative Layout 




NEW BUTTON 


WeVe putting a setond button 
_ underneath the -first so that 
the start edjes of both 
buttons are aliened- 



The lines: 

android:layout_alignStart="@id/button_click_me" 
android:layout_below="@id/button_click_me" 


l/Vhen youVe ve-fev-vinj -to 
views that have already been 
de-fine d in the layout you dan 
use &\d instead o-f d. 


ensure that the second button has its start edge aligned to the start edge of the 
first button, and is always positioned beneath it. 
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relative to views 


Attributes for positioning views 
relative to other views 


Here are attributes you can use when positioning views relative to 
another view. Add the attribute to the view you’re positioning, and set 

its value to the view you’re positioning relative to: Rci^crwbcv", you £an leave out the 

^-— '+" it you've alveady detmed the 

android:attribute="@+id/view_id" view & '/ ou ' r layout 


Attribute What it does 

layout_above Puts the view above the view you're anchoring it to. 


layoutjbelow 


Puts the view below the view you're anchoring it to. 


layout_alignTop Aligns the top edge of the view to the top edge of the 

view you're anchoring it to. 


layout_alignBottom Aligns the bottom edge of the view to the bottom 

edge of the view you're anchoring it to. 


/ouv view goes above. 

\£- 



The view you've 
^ = - andhoving it -to 


kr 


Youv view 
goes below. 


CLICK ME 


'3 


Align *the view’s bop edges 
Align “the view’s bobbor* edges 


CLICK ME 




layout.alignLeft, 

layout.alignStart 


Aligns the left (or start) edge of the view to the left (or 
start) edge of the view you're anchoring it to. 


layout_alignRight, Aligns the right (or end) edge of the view to the right 
layout alignEnd (or en d) edge of the view you're anchoring it to. 


CLICK ME 


Align bbe view’s 
le-Cb ov sbavb 
edges. 


CLICK ME 


Align bhe 
view’s vighb ov 
end edges. 


layout_toLeftOf, Puts the right (or end) edge of the view to the left (or 

layout_toStartOf start) of the view y° u ' re anchoring it to. 


layout_toRightOf, Puts the left (or start) edge of the view to the right (or 

layout.toEndOf end) of the view you're anchoring it to. 


CLICK ME 


Youv- view goes bo bbe le*fb 
ov- sbavb- 


|_—) CLICK ME 

Youv View goes bo bbe viabb 
ov end- 
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relative and grid layouts 


A grid layout displays views in a grid 

A grid layout splits the screen up into a grid of rows and columns, 
and allocates views to cells: 



i □ 

Grid Layout 

Q 5:45 1 

This is a TextView 

CLICK ME 

Please type here 




How you define a grid layout 

You define a grid layout in a similar way to how you define the 
other types of layout, this time using the <GridLayout> element: 


<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android: layout_width= n match_parent n ^ These av-e “the same attributes we 

, . , n used-Cor our other layouts. 

android:layout_height=match_parent y ' 


android:columnCount="2" How many dolumns 

... > layout to have (i* 


you want your 
this ease, Z) 


... ^—*This is where you add any views. 


</GridLayout> 

You specify how many columns you want the grid layout to have 
using: 

android:columnCount= M number" 

where number is the number of columns. You can also specify a 
maximum number of rows using: 

android:rowCount="number" 

but in practice you can usually let Android figure this out based on 
the number of views in the layout. Android will include as many 
rows as is necessary to display the views. 
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grid layout 


Adding views to the grid layout 

You add views to a grid layout in a similar way to 
how you add views to a linear layout: 

<GridLayout ... > 

<TextView 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/textview" /> 


<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/click_me" /> 

<EditText 

android:layout_width= M wrap_content" 
android:layout_height= M wrap_content M 
android:hint= M @string/edit" /> 


</GridLayout> 


Just as with a linear layout, there’s no need to give 
your views IDs unless you’re explicitly going to refer 
to them in your activity code. The views don’t need 
to refer to each other within the layout, so they don’t 
need to have IDs for this purpose. 

By default, the grid layout positions your views in the 
order in which they appear in the XML. So if you 
have a grid layout with two columns, the grid layout 
will put the first view in the first position, the second 
view in the second position, and so on. 

The downside of this approach is that if you remove 
one of your views from the layout, it can drastically 
change the appearance of the layout. To get around 
this, you can specify where you want each view to 
appear, and how many columns you want it to span. 


i Q 

Q 5:45 1 

Grid Layout 
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relative and grid layouts 


Let's create a new grid layout 


To see this in action, we’ll create a grid layout that specifies which 
cells we want views to appear in, and how many columns they 
should span. The layout is composed of a text view containing the 
text “To”, an editable text field that contains hint text of “Enter 
email address”, an editable text field that contains hint text of 
“Message”, and a button labeled “Send”: 


Here's what we're going to do 


i □ "a Q 5:55 

Grid Layout 


To: ^nter email address 
Message 


SEND 



o 


Sketch the user interface, and split it into rows and columns. 

This will make it easier for us to see how we should construct our layout. 


O 


Build up the layout row by row. 
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sketch it 


We'll start with a sketch 


The first thing we’ll do to create our new layout is sketch it out. That way 
we can see how many rows and columns we need, where each view should 
be positioned, and how many columns each view should span. 


1 st row 


2nd row- 


3rd row ■ 


1st 

column 


i 


2nd 

column 


i 


To 


Enter email address 


Message 


Send 


The first row has a text view in the 
^ first column with text of "To/' and an 
editable text field in the second column 
with a hint of "Enter email address." 


The second row has an editable text 
<^ field with text of "Message." It starts 
in the first column and spans across the 
second. It needs to fill the available 
space. 




The third row has a button with text of 
"Send." It's centered horizontally across 
both columns, which means it needs to 
span the two columns. 


The grid layout needs two columns 


We can position our views how we want if we use a grid layout with two columns: 


<GridLayout xmlns:android= n http://schemas.android.com/apk/res/android M 
xmlns:tools= n http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="16dp" 
android:columnCount="2" 

tools:context="com.hfad.gridlayout.MainActivity" > 

</GridLayout> 


Now that we have the basic grid layout defined, we can start adding views. 


826 Appendix i 



















relative and grid layouts 


Row 0; add views to specific rows and columns 


The first row of the grid layout is composed of a text view in the 
first column, and an editable text field in the second column. You 
start by adding the views to the layout: 

<GridLayout...> 

CTextView 

android:layout_width= M wrap_content" 
android:layout_height="wrap_content" 
android:text= M @string/to" /> 

<EditText 



Enter email address 



You can use android: gravity 
and android* lay outgravity 
attributes with grid layouts. 


android: layout_width= M wrap_content" 
android: layout_height= M wrap_content M 
android:layout_gravity= M fill_horizontal" 
android:hint= M @string/to_hint" /> 

</GridLayout> 


You can use lay°u-t_gvavi-ty in gvid layouts W 

We've using -Pill _hov-izon-tal because we want 

the editable text -f ield to -fill the remaining 
horizontal spade* 


Then you use the android: layout_row and android: layout_column 
attributes to say which row and column you want each view to appear in. The 
row and column indices start from 0, so if you want a view to appear in the first 
column and first row, you use: 


android:layout_row= M 0" 
android:layout_column=" 



Columns and rows start at O, 
so -this re-fers to the -f irst row 
and -first Column. 


Let’s apply this to our layout code by putting the text view in column 0, and the 
editable text field in column 1. 


<GridLayout...> 
<TextView 


Row and column 
indices start at ©. 
layout_column= f n” 
refers to column 
n+1 in the display. 



android:layout_row="0" 
android:layout_column= 

android:hint="@string/to_hint M /> 
</GridLayout> 
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row 1 


Row 1: wake a view span multiple columns 

The second row of the grid layout is composed of an editable text 
field that starts in the first column and spans across the second. 

The view takes up all the available space. 


To get a view to span multiple columns, you start by specifying 
which row and column you want the view to start in. We want the 
view to start in the first column of the second row, so we need to 
use: 


android:layout_row="1" 
android:layout_column="0" 

We want our view to go across two columns, and we can do this 
using the android: layout_columnSpan attribute like this: 

android:layout_columnSpan="number" 

where number is the number of columns we want the view to 
span across. In our case, this is: 

android:layout_columnSpan="2" 

Putting it all together, here’s the code for the message view: 


Column 

0 

i 


Column 

1 

i 



<GridLayout...> 

CTextView... /> 
<EditText.../> 


' Utese ave -the views we added on -the last page -for vow 0 . 


<EditText 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android: layout_gravity="fill" : We want tbe view 

android:gravity="top" ^ 2nd -for tbe te%t 

android:layout_row="1" 

android:layout_column="0" 'The view starts m 

android:layout_columnSpan="2" ^ 
android:hint="@string/message" /> 

</GridLayout> 


to -fill -the available spade, 
bo appear at tbe top. 

dolumn O, and spans two dolumns. 


Now that we’ve added the views for the first two rows, all we 
need to do is add the button. 
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relative and grid layouts 


Row Z: make a view span multiple columns 

We need the button to be centered horizontally across the 
two columns like this: 


Column Column 

0 1 


A_ i 





Row 2 —> 



Sehd 






Column span = 2 


/( 



8 



Layout Magnets 


We wrote some code to center the Send button in the third row of the grid layout, but a sudden 
breeze blew some of it away. See if you can reconstruct the code using the magnets below. 


<GridLayout...> 

CTextView... />^ 

<EditText .../> ( _ . 

f are the views we ve already added- 

<EditText.../> 1 1 

<Button 

android:layout_width="wrap_content M 
android:layout_height="wrap_content" 

android:layout_row= 


android:layout_column= 


android:layout_gravity= 
android:layout_columnSpan= 


android:text="@string/send" /> 


You won't heed -to use 
all of these magnets. 



J~ cen ter horizontal 


</GridLayout> 
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magnets solved 



Layout Magnets Solution 

We wrote some code to center the Send button in the third row of 
the grid layout, but a sudden breeze blew some of it away. See if you 
can reconstruct the code using the magnets below. 

<GridLayout...> 

CTextView... /> 

<EditText.../> 


<EditText.../> 


<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 


android:layout_row= 



The button starts at row 2-, dolumn O. 


android: layout_column= "0"k s* Wb want to denter it horizontally. 


android:layout_gravity= I center__horizontal 


-£ 




] 


android:layout_columnSpan= 
android:text="@string/send" /> 


|t spans two dolumns. 


</GridLayout> 


Column Column 

0 1 
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relative and grid layouts 


The full code for the grid layout 

Here’s the full code for the grid layout. 


<?xml version="1.0" encoding="utf-8"?> 

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="16dp" 
android:columnCount="2" 

tools:context="com.hfad.gridlayout.MainActivity"> 


<TextView 

android: 
android: 
android: 
android: 
android: 

<EditText 

android: 
android: 
android: 
android: 
android: 
android: 


layout_width="wrap_content" 
layout_height="wrap_content" 
layout_row="0" 
layout_column="0" 
text="@string/to" /> 

The email address 
-te*t -field- 

layout_width="wrap_content" 
layout_height="wrap_content" 
layout_gravity="fill_horizontal 
layout_row="0" 
layout_column="1" 
hint="@string/to_hint" /> 


The To 
text View. 




To:^nter email address 


Message 

The Code -fov the 
Message text -f ield 
and the Send button 
is OY\ -the re*t yaje- 
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code, continued 


The grid layout code (continued) 


<EditText 

android:layout_width="wrap_content" 
android:layout_height= n wrap_content" 



To:^nter email address 


android:layout_gravity="fill" 
android:gravity="top" 


The Message 


text -field 


Message 


android:layout_row="1" 
android:layout_column="0" 
android:layout_columnSpan="2" 
android:hint="@string/message" /> 

<Button 

android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_row="2" 
android:layout_column="0" 

android:layout_gravity="center_horizontal" 
android:layout_columnSpan="2" 
android:text="@string/send" 


</GridLayout> 



doluwms, starting trow 
row 2- dolumn O- Its 
Centered horizontally- 


SEND 
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appendix In gradle 




The Gradle Build Tool + 



Most Android apps are created using a build tool called Gradle. 

Gradle works behind the scenes to find and download libraries, compile and deploy your 
code, run tests, clean the grouting, and so on. Most of the time you might not even realize 
it’s there because Android Studio provides a graphical interface to it. Sometimes, however, 
it’s helpful to dive into Gradle and hack it manually. In this appendix we’ll introduce you 
to some of Gradle’s many talents. 
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introducing gradle 

has frradle 

What have th e Roma n o ever done for os? 

A 

When you click the run button in Android Studio, most of the actual work 
is done by an external build tool called Gradle. Here are some of the 
things that Gradle does: 


o 

o 

o 

o 


Locates and downloads the correct versions of any third-party libraries you need. 

Galls the correct build tools in the correct sequence to turn all of your source code and 
resources into a deployable app. 

Installs and runs your app on an Android device. 

A whole bunch of other stuff, like running tests and checking the quality of your code. 


It’s hard to list all of the things that Gradle does because it’s designed to 
be easily extensible. Unlike other XML-based build tools like Maven or 
Ant, Gradle is written in a procedural language (Groovy), which is used 
for both configuring a build and adding extra functionality. 


Your project's Cradle files 


Every time you create a new project, Android Studio creates two files 
called build.gradle. One of these files is in your project folder, and contains 
a small amount of information that specifies the basic settings of your app, 
such as what version of Gradle to use, and which online repository: 


buildscript { 

repositories { 
j center() 

} 

dependencies { 

classpath 'com.android.tools.build:gradle: 2.3.0 ' 

} 


} 

allprojects { 

repositories { 
j center() 

} 

} 


□ 
My Project 



build.gradle 


task clean(type: Delete) { 

delete rootProject.buildDir 

} 


You will normally only need to change the code in this file if you want to 
install a third-party plug-in, or need to specify another place that contains 
downloadable libraries. 
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Your app's main Gradle file 

The second build.gradle file lives inside the app folder within your 
project. This file tells Gradle how to build all of the code in your 
main Android module. It’s where the majority of your application’s 
properties are set, such as the level of the API that you’re targeting, 
and the specifics of which external libraries your app will need: 

apply plugin: 'com.android.application' 

android { 

compileSdkVersion 25 
buildToolsVersion "25.0.1" 
defaultConfig { 

applicationld "com.hfad.example" 
minSdkVersion 19 
targetSdkVersion 25 build.gradle 

versionCode 1 
versionName "1.0" 

testlnstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 

} 

buildTypes { 
release { 

minifyEnabled false 

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro’ 



} 


} 


dependencies { 

compile fileTree(dir: ’libs A include: ['*.jar']) 

androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2 ', { 

exclude group: 'com.android.supportmodule: 'support-annotations' 

}) 

compile 'com.android.support:appcompat-v7:25.1.1' 

compile 'com.android.support.constraint:constraint-layout:1.0.2' 

testCompile 'junit:junit:4.12' 

} 
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gradle’s built in 


Cradle comes built in to your project 

Every time you create a new application, Android Studio includes an 
install of the Gradle build tool. If you look in the project directory, you 
will see two files called gradlew and gradlew.bat. These files contains scripts 
that allow you to build and deploy your app from the command line. 

To get more familiar with Gradle, open a command prompt or terminal 
on your development machine and change into the top-level directory 
of your project. Then run one of the gradlew scripts with the parameter 
tasks. Gradle will tell you some of the tasks that it can perform for you: 

| File Edit Window Help EmacsFTW | 


$ ./gradlew tasks 
Build tasks 


assemble - Assembles all variants of all applications and 
secondary packages. 

build - Assembles and tests this project, 
clean - Deletes the build directory. 
compileDebugSources 

mockableAndroidJar - Creates a version of android.jar that's 
suitable for unit tests. 

Install tasks 


installDebug - Installs the Debug build. 
uninstallAll - Uninstall all applications. 
uninstallDebug - Uninstalls the Debug build. 

Verification tasks 


check - Runs all checks. 

connectedAndroidTest - Installs and runs instrumentation tests 
for all flavors on connected devices. 
lint - Runs lint on all variants. 
test - Run unit tests for all variants. 

To see all tasks and more detail, run gradlew tasks --all 

BUILD SUCCESSFUL 

Total time: 6.209 secs 

$ 


We’ve dut down the adtual output, 
bedause there are "'any, many 
tasks that you dan run by de-fault- 

£ 


Let’s take a quick tour of some of the most useful ones. 
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The check task 

The check task performs static analysis on the source code in your 
application. Think of it as your coding buddy, who at a moment’s notice can 
scoot through your files looking for coding errors. By default, the check 
task uses the lint tool to look for common Android programming errors. It 
will generate a report in app/build/reports/lint-results.html: 


□ 

MyProiect 

HT3 


3 *? P r-w- 


build 


mi 



Lint Report: 5 warnings 


reports 

LJ3| 


lint-results.html 


Overview 

Security 

1 A AllowBackup : AllowBackup/FullBackupContent Problems 

Performance 

3 A UnusedResources : Unused resources 

Usability 

1 A GooQleAppIndexinqWarnina : Missing support for Firebase App Indexing 
Disabled Checks (21) 

DISMISS 


AllowBackup/FullBackupContent Problems 


../.■/src/main/AndroidManifest.xml :5: On SDK version 23 and up, your app data will be automatically backed up and restored 
on app install. Consider adding the attribute android: fullBackupContent to specify an @xml resource which configures 
which files to backup. More info: https://devetoper.android.com/training/backup/autosyncapi.html 


2 <manifest xmlns: android= "http://schemas.android.com/apk/res/android" 

3 package^ " cod. hfad . myfirstapp " > 

4 

5 application 

6 android :allowBackup=" true" 
android: icon= "@mipmap/ic_launcher" 
android :label=" @string/app_name" 


The clean installPebug task 

This task will do a complete compile and install of your application on 
your connected device. You can obviously do this from the IDE, but it can 
be useful to do this from the command line if, for example, you want to 
automatically build your application on an Integration Server. 
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show dependencies 


The androidPependencies task 

For this task, Gradle will automatically pull down any libraries your 
application requires, and some of those libraries will automatically 
pull down other libraries, which might pull down other libraries and... 
well, you get the idea. 

Even though your app /build.gradle file might only mention a 
couple of libraries, your application might need to install many 
dependent libraries for your app. So it’s sometimes useful to see 
which libraries your application requires, and why. That’s what the 
androidDependencies task is for: it displays a tree of all of the 
libraries in your app: 


File Edit Window Help EmacsFTW 


$ ./gradlew androidDependencies 

Incremental java compilation is an incubating feature. 

:app:androidDependencies 
debug 

+- com.android.support:appcompat-v7:25.1.l@aar 

| +- com.android.support:support-annotations:25.1.1@jar 

| +- com.android.support:support-v4:25.1.l@aar 

j | +- com.android.support:support-compat:25.1.l@aar 

j j | \- com.android.support:support-annotations:25.1.1@jar 

| | +- com.android.support:support-media-compat:25.1.l@aar 

j j | +- com.android.support:support-annotations:25.1.1@jar 

j j j \- com.android.support:support-compat:25.1.l@aar 

| | | \- com.android.support:support-annotations:25.1.1@jar 

j j +- com.android.support:support-core-utils:25.1.l@aar 

j j | +- com.android.support:support-annotations:25.1.1@jar 

| | | \- com.android.support:support-compat:25.1.l@aar 
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gradlew <your-task-goe$-here> 

The real reason that Android apps are commonly built with Gradle 
is because it’s easily extended. All Gradle files are written in Groovy, 
which is a general-purpose language designed to be run by Java. That 
means you can easily add your own custom tasks. 

As an example, add the following code to the end of your app / build.gradle 
file: 

task j avadoc (type: Javadoc) { build.gradle 

source = android.sourceSets.main.java.srcDirs 

classpath += project.files(android.getBootClasspath().join(File.pathSeparator)) 
destinationDir = file("$project.buildDir/javadoc/") 
failOnError false 

} 



This code creates a new task called j avadoc, which generates javadoc 
for your source code. You can run the task with: 

./gradlew javadoc 


The generated files will be published in app/build/javadoc: 


BOO 


com.hfad.myfirstapp (app API) X 


( ?) ® H ie: 


r 


///Users/dawng/AndroidStudio 


| (a] 


* it ☆ 


CS Most Visited Q] Head First - # wiki Q Pottermore: Book... M Sketcher - dawn.. 




MainActIvlty 


PACKAGE CLASS TREE DEPRECATED INDEX HELP 


PREV PACKAGE NEXT PACKAGE FRAMES NO FRAMES 


Package com.hfad.myfirstapp 


Class Summary 

Class Description 

MainActivity 



□ 

MyProject 

ti 


aRP 


HO 

build 


MT3 


javadoc 

U3i 


index.html 
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plug-ins 


(rradle plug-ins 

As well as writing your own tasks, you can also install Gradle plug¬ 
ins. A plug-in can greatly extend your build environment. Want to 
write Android code in Clojure? Want your build to automatically 
interact with source control systems like Git? How about spinning 
up entire servers in Docker and then testing your application on 
them? 

You can do these things, and many, many more by using Gradle 
plug-ins. For details on what plug-ins are available, see https:// 
plugins.gradle. org. 
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^ The Android Runtime + 



Ever wonder how Android apps can run on so many kinds of 

devices? Android apps run in a virtual machine called the Android runtime (ART), 
not the Oracle Java Virtual Machine (JVM). This means that your apps are quicker to start 
on small, low-powered devices and run more efficiently. In this appendix, we’ll look at how 
ART works. 


this is an appendix 
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what’s art? 


What is the Android runtime? 

The Android Runtime (ART) is the system that runs your compiled 
code on an Android device. It first appeared on Android with the 
release of KitKat and became the standard way of running code in 
Lollipop. 

ART is designed to run your compiled Android apps quickly and 
efficiently on small, low-powered devices. Android Studio uses the 
Gradle build system to do all the work of creating and installing 
apps for you, but it can be useful to understand what happens 
behind the scenes when you click the Run button. Let’s see what 
really goes on. 

Previously, lava code raw ow the Oracle JVM 

Java has been around for a very long time, and compiled Java 
applications have almost always been run on the Oracle Java 
Virtual Machine JVM). In that scenario, Java source code gets 
compiled down to .class files. One .class file gets created for every 
Java class, interface, or enum in your source code: 


Vow don't need to understand the into 
in -this appendi* m ov-dev- *to txtdic tool 
Android arcs. So it you're not into the 
nitty-gritty ot what's joing on behind 
the Sdenes when an Android deride runs 
an arc- teel tree to skip this append'.*- 



.java 




.class 


The .class files contain Java bytecodes, which can be read and 
executed by the JVM. The JVM is a software emulation of a 
Central Processing Unit (CPU), like the chip at the heart of your 
development machine. But because it’s emulated, it can be made to 
work on almost any device. That’s why Java code is designed to be 
written once, run anywhere. 

So is that what happens on Android devices? Well.. .not quite. The 
Android Runtime performs the same kind of job as the JVM, but it 
does it in a very different way. 
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ART compiles code into PEX files 

When you do Android development, your Java source code is 
compiled down into .dex files. A .dex file serves a similar purpose 
to a .class file, because it contains executable bytecodes. But 
instead of being JVM bytecodes, they are in a different format 
called Dalvik. DEX stands for Dalvik Executable. 

Rather than creating a .dex file for each and every class file, your 
app will normally be compiled down into a single file called 
classes.dex. That single .dex file will contain bytecodes for all of 
your source code, and for every library in your app. 



The DEX format can only cope with 65,535 methods, so if your 
app contains a lot of code or some large libraries, your file might 
need to be converted into multiple .dex files: 



.class 


.dex 



You can find out more about creating multi-DEX apps here: 
https:/ / developer.android.com/studio/build/multidex.html. 
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.class to .dex 


How PEX files get created 

When Android builds your app, it uses a tool called dx, which 
stitches .class files into a DEX file: 



It may seem a bit weird that the compilation process involves two 
stages of compilation: first to .class files, and then from .class files 
to the DEX format. Why doesn’t Google just create a single tool 
that goes straight from . j ava source code to DEX bytecodes? 

For a while Google was developing a compiler called JACK and 
an associated linker called JILL that could create DEX code 
straight from Java code, but there was a problem. Some Java 
tools don’t just work at the source code level; they work directly 
with .class files, and modify the code that those files contain. 

For example, if you use a code coverage tool to see which code 
your tests are actually running, the coverage tool will likely want 
to modify the contents of the generated .class files to add in 
additional bytecodes to keep track of the code as it’s executed. If 
you used the JACK compiler, no .class files were generated. 

So back in March 2017, Google announced that it was shelving 
JACK, and was putting all of its efforts into making the dx 
tool work really well with the latest Java .class formats. This 
has the additional advantage that any new Java language 
features—so long as they don’t require new Java byte codes—will 
automatically be supported by Android. 


844 Appendix Hi 










ART 


PEX files are zipped into APK files 

But Android apps aren’t shipped around as .dex files. There’s a whole bunch 
of other files that make up your app: images, sounds, metadata, and so on. 
All of these resources and your DEX bytecode is wrapped up into a single 
zip file called an Android Package or .apk file. The .apk file is created by 
another tool called the Android Asset Packing Tool, or aapt. 




When you download an app from the Google Play Store, what actually gets 
downloaded is an APK file. In fact, when you run your app from Android 
Studio, the build system will first build an .apk file and then install it onto 
your Android device. 

You way need to sign the .apk file 

If you’re going to distribute your app through the Google Play Store, 
you will need to sign it. Signing an app package means that you store an 
additional file in the .apk that is based on a checksum of the contents of the 
.apk and a separately generated private key. The .apk file uses the standard 
jarsigner tool that comes as part of Oracle’s Java Development Kit. The 
jarsigner tool was created to sign .jar files, but it will also work with .apk files. 

If you sign the .apk file, you will then also need to run it through a tool 
called zipalign, which will make sure that the compressed parts of the file 
are lined up on byte boundaries. Android wants them byte-aligned so it can 
read them easily without needing to uncompress the file. 


JOOI& 




IHOloJ s, 

jarsigner 



ooioior 

-7 

zipalign 

foioilj 

onl/ 





Android Studio will do all of this for you if you choose Generate Signed 
APK from the Build menu. 

So that’s how your app gets converted from Java source code into an 
installable file. But how does it get installed and run on your device? 



signed .apk 
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hello adb 


Say hello to the Android Debug fridge (adb) 


All communication between your development machine and your 
Android device takes place over the Android Debug Bridge. There 
are two sides to the bridge: a command-line tool on your dev 
machine called adb, and a daemon process on your Android device 
called adbd (the Android Debug Bridge Daemon). 

The adb command on your development machine will run a 
copy of itself in the background, called the ADB server. The server 
receives commands over network port 5037, and sends them to the 
adbd process on the device. If you want to copy or read a file, install 
an app, or look at the logcat information for an app, then all of this 
information passes back and forth across the debug bridge. 

So when the build system wants to install your APK file, it does so 
by sending a command like this to the debug bridge: 


adb install bitsandpizzas.apk 


The file will then be transferred to a virtual device, or over a USB 
cable to a real device, and be installed into the /data/app/ directory, 
where it will sit waiting for the app to be run. 


How apps come alive: running your APK file 


When your app is run, whether it’s been started by a user pressing 
its launch icon or because the IDE has started it, the Android 
device needs to turn that .apk file into a process running in memory. 

It does this using a process called Zygote. Zygote is like a half- 
started process. It’s allocated some memory and already contains 
the main Android libraries. It has everything it needs, in fact, except 
for the code that’s specific to your app. 

When Android runs your app, it first creates a copy (a.k.a. fork) 
of the Zygote process, and then tells the copied process to load 
your application code. So why does Android leave this half-started 
process hanging around? Why not just start a fresh process from 
scratch for each app? It’s because of performance. It can take 
Android a long time to create a new process from scratch, but it can 
fork a copy of an existing process in a split second. 





— ~ 1/_The new app prodess will 

f° rk 0 v "PP ^ be a tomfleie dopy 

process J.^oie prodess. 
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Android converts the .dex code to OAT format 

The new app process now needs to load the code that’s 
specific to your app. Remember, your app code is stored in 
the classes.dex file inside your .apk package. So the classes.dex file 
is extracted from the .apk and placed into a separate directory. 

But rather than simply use the classes.dex file, Android will 
convert the Dalvik byte codes in classes.dex into native machine 
code. Technically, the classes.dex will be converted into an ELF 
shared object. Android calls this library format OAT, and calls 
the tool that converts the classes.dex file dex2oat. 


classes.dex 





1661 

>1_^ 


\ 

11161661 

1 / 

dex2oat 

-7 

6616161 




loiomj 


(OAT version) 


The converted file is stored into a directory named something 
like this: 

/ data/dalvik-cache / data@app@com.hfad.bitsandpizzas@base.apk@classes.dex 

This file can then be loaded as a native library by the 
application process, and the app appears on the screen. 
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appendix iV: adb 

^ The Android Debug Bridge ^ 


What better gift 
for the girl who has 
everything than a new 
command-line tool? 


In this book, we’ve focused on using an IDE for all your 

Android needs. But there are times when using a command-line tool can be plain 
useful, like those times when Android Studio can’t see your Android device but you just 
know it’s there. In this chapter, we’ll introduce you to the Android Debug Bridge (or adb), 
a command-line tool you can use to communicate with the emulator or Android devices. 
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adb 


adb: your command-line pal 

Every time your development machine needs to talk to an Android device, 
whether it’s a real device connected with a USB cable, or a virtual device 
running in an emulator, it does so by using the Android Debug Bridge 
(adb). The adb is a process that’s controlled by a command that’s also called 
adb. 

The adb command is stored in the platform-tools directory of the Android 
System Developer’s Kit on your computer. If you add the platform-tools 
directory to your PATH, you will be able to run adb from the command line. 

In a terminal or at a command prompt, you can use it like this: 


1 Interactive Session 

- 1 

$ adb devices 


List of devices 

attached 

emulator-5554 

$ 

device 


The adb devices command means “Tell me which Android devices you 
are connected to.” The adb command works by talking to an adb server 
process, which runs in the background. The adb server is sometimes called 
the adb daemon or adbd. When you enter an adb command in a terminal, a 
request is sent to network port 5037 on your machine. The adbd listens for 
commands to come in on this port. When Android Studio wants to run an 
app, or check the log output, or do anything else that involves talking to an 
Android device, it will do it via port 5037. 



Device 


When the adbd receives a command, it will forward it to a separate adbd 
process that’s running in the relevant Android device. This process will then 
be able to make changes to the Android device or return the requested 
information. 
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Sometimes, if the adb server isn’t running, the adb command will 
need to start it: 


Interactive Session 


$ adb devices 

* daemon not running, starting it now on port 5037 * 

* daemon started successfully * 

List of devices attached 
emulator-5554 device 

$ 


Likewise, if ever you plug in an Android device and Android 
Studio can’t see it, you can manually kill the adb server and restart 
it: 


Interactive Session 


$ adb devices 
List of devices attached 
$ adb kill-server 
$ adb start-server 

* daemon not running, starting it now on port 5037 * 

* daemon started successfully * 

$ adb devices 

List of devices attached 
emulator-5554 device 

$ 


By killing and restarting the server, you force adb to get back in 
touch with any connected Android devices. 
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shell 


Running a shell 

Most of the time you won’t use adb directly; you’ll let an IDE like 
Android Studio do the work for you. But there are times when it can be 
useful to go to the command line and interact with your devices directly. 

One example is if you want to run a shell on your device: 

| Interactive Session | 


$ adb shell 
root@generic_x86:/ # 


The adb shell command will open up an interactive shell directly 
on the Android device. If you have more than one device attached, you 
can indicate which device you mean with the - s option, followed by the 
name given by the adb devices command. For example, adb -s 
emulator-5554 shell will open a shell on the emulator. 

Once you open a shell to your device, you can run a lot of the standard 
Linux commands: 


| Interactive Session 

$ adb shell 
root@generic_x86:/ # 
acct 
cache 

Is 




charger 

config 

d 





data 





default.prop 
dev 





etc 

file contexts 





11root@generic_x86 : / 

# df 




Filesystem 

Size 

Used 

Free 

Blksize 

/dev 

439.8M 

60. OK 

439.8M 

4096 

/mnt/asec 

439.8M 

0. OK 

439.8M 

4096 

/mnt/obb 

439.8M 

0. OK 

439.8M 

4096 

/system 

738.2M 

533.OM 

205.2M 

4096 

/data 

541.3M 

237.8M 

303.5M 

4096 

/cache 

65. OM 

4.3M 

60.6M 

4096 

/mnt/media rw/sdcard 

196.9M 

4.5K 

196.9M 

512 

/s torage/sdcard 
root@generic x86:/ # 

196.9M 

4.5K 

196.9M 

512 
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Useful shell commands 

If you open a shell to Android, you have access to a whole bunch 
of command line tools. Here are just a few: 

Command Description Example (and what it does) 

pm Package management tool. pm list packages (this lists all installed apps) 

pm path com.hfad.bitzandpizzas (find where 
an app is installed) 

pm -help (show other options) 


ps Process status. ps (lists all processes and their IDs) 

dexdump Display details of an APK. dexdump -d /data/app/com. hf ad. 

bitzandpizzas-2/base.apk 
(disassemble an app) 


lsof 


List a process's open files lsof -p 1234 (show what process with id 1234 is doing) 

and other connections. 


screencap Take a screenshot. screencap -p /sdcard/screenshot .png (save 

current screenshot to /sdcard/screenshotpng, and get it off 
the device with 

adb pull /sdcard/screenshot.png) 


top 


Show busiest processes. 


top -m 5 (show the top five processes) 


Each of these examples works from an interactive shell prompt, 
but you can also pass them direct to the shell command from 
your development machine. For example, this command will 
show the apps installed on your device: 


Interactive Session 


$ adb shell pm list packages 
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get output 


Kill the adb server 

Sometimes the connection can fail between your development 
machine and your device. If this happens, you can reset the 
connection by killing the adb server: 

| Interactive Session | 


$ adb kill-server 


The next time you run an adb command, the server will restart and 
a fresh connection will be made. 

(ret the output from logcat 

All of the apps running on your Android device send their output 
to a central stream called the logcat. You can see the live output 
from the logcat by running the adb logcat command: 


Interactive Session 


$ adb logcat 

- beginning of system 

I/Vold ( 936): Void 2.1 (the revenge) firing up 

D/Vold ( 936): Volume sdcard state changing -1 

(Initializing) -> 0 (No-Media) 

W/DirectVolume( 936): Deprecated implied prefix pattern 

detected, please use Vdevices/platform/goldfish_mmc.0*' 
instead 


The logcat output will keep streaming until you stop it. It can be 
useful to run adb logcat if you want to store the output in a 
file. The adb logcat command is used by Android Studio to 
produce the output you see in the Devices/logcat panel. 
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Copying files to/from your device 

The adb pull and adb push commands can be used to 
transfer files back and forth. For example, here we are copying the 
/default.prop/ properties file into a local file called l.txt: 


Interactive Session 


$ adb pull /default.prop l.txt 
28 KB/s (281 bytes in 0.009s) 

$ cat 1.txt 

# 

# ADDITIONAL DEFAULT PROPERTIES 

# 

ro.secure=0 

ro.allow.mock.location=l 
ro.debuggable=l 
ro.zygote=zygote32 
dalvik.vm.dex2oat-Xms=64m 
dalvik.vm.dex2oat-Xmx=512m 
dalvik. vm. image-dex2oat-Xms=64m 
dalvik.vm.image-dex2oat-Xmx=64m 
ro.dalvik.vm.native.bridge=0 
persist.sys.usb.config=adb 
$ 


And much, much more... 

There are many, many commands that you can run using adb: you 
can back up and restore databases (very useful if you need to debug 
a problem with a database app), start the adb server on a different 
port, reboot machines, or just find out a lot of information about 
the running devices. To find out all the options available, just type 
adb on the command line: 


Interactive Session 


$ adb 

Android Debug Bridge version 1.0.32 

a - directs adb to listen on all 

terfaces for a connection 

- directs command to the only 
returns an error if more than 

- directs command to the only 


in 


-d 

connected USB device 
one USB device is present. 


running emulator, 
returns an error if more than one emulator is 
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appendix V: the android emulator 


^ Speeding Things Up + 



Ever felt like you were spending all your time waiting for the 

emulator? There’s no doubt that using the Android emulator is useful. It allows you 
to see how your app will run on devices other than the physical ones you have access to. 
But at times it can feel a little...sluggish. In this appendix, we’ll explain why the emulator 
can seem slow. Even better, we’ll give you a few tips we’ve learned for speeding it up. 
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Why the emulator is so slow 

When you’re writing Android apps, you’ll spend a lot of 
time waiting for the Android emulator to start up or deploy 
your code. Why is that? Why is the Android emulator so 
sloooooow? If you’ve ever written iPhone code, you know 
how fast the iPhone simulator is. If it’s possible for the 
iPhone, then why not for Android? 

There’s a clue in the names: the iPhone simulator and the 
Android emulator. 

The iPhone simulator simulates a device running the iOS 
operating system. All of the code for iOS is compiled to run 
natively on the Mac and the iPhone simulator runs at Mac- 
native speed. That means it can simulate an iPhone boot-up 
in just a few seconds. 

The Android emulator works in a completely different way. 
It uses an open source application called QEMU (or Quick 
Emulator) to emulate the entire Android hardware device. 

It runs code that interprets machine code that’s intended to 
be run by the device’s processor. It has code that emulates 
the storage system, the screen, and pretty much every other 
piece of physical equipment on an Android device. 


AVD 


AVD 


AVD 


AVD 


AVD 


QEMU Emulator 


All the /Wvoid Virtual Devices v-un 
o« an emulatov tailed <$EA1IA. 


An emulator like QEMU creates a much more realistic 
representation of a virtual device than something like the 
iPhone simulator does, but the downside is that it has to do 
far more work for even simple operations like reading from 
disk or displaying something on a screen. That’s why the 
emulator takes so long to boot up a device. It has to pretend 
to be every little hardware component inside the device, and 
it has to interpret every single instruction. 
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android emulator 


How to speed up your Android development 

1. Use a real device 

The simplest way to speed up your development process is by using a real 
device. A real device will boot up much faster than an emulated one, and 
it will probably deploy and run apps a lot more quickly. If you want to 
develop on a real device, you may want to go into “Developer options” 
and check the Stay Awake option. This will prevent your device from 
locking the screen, which is useful if you are repeatedly deploying to it. 

Z. Use an emulator snapshot 

Booting up is one of the slowest things the emulator does. If you save a 
snapshot of the device while it’s running, the emulator will be able to 
reset itself to this state without having to go through the boot-up process. 
To use a snapshot with your device, open the AVD manager from the 
Android Studio menu by selecting Tools—>• Android—>• AVD Manager, edit 
the AVD by clicking on the Edit symbol, and then check the “Store a 
snapshot for faster startup” option. 

This will save a snapshot of what the memory looks like when the device 
is running. The emulator will be able to restore the memory in this state 
without booting the device. 

3. Use hardware acceleration 

By default, the QEMU emulator will have to interpret each machine 
code instruction on the virtual device. That means it’s very flexible 
because it can pretend to be lots of different GPUs, but it’s one of the 
main reasons why the emulator is slow. Fortunately, there’s a way to get 
your development machine to run the machine code instructions directly. 
There are two main types of Android Virtual Device: ARM machines and 
x86 machines. If you create an x86 Android device and your development 
machine is using a particular type of Intel x86 GPU, then you can 
configure your emulator to run the Android machine code instructions 
directly on your Intel GPU. 

You will need to install Intel’s Hardware Accelerated Execution Manager 
(HAXM). At the time of writing , you can find HAXM here: 

https://software. Intel, com/en-us/android/articles/intel-hardware-accelerated- ^— 
execution-manager 

HAXM is a hypervisor. That means it can switch your GPU into a special 
mode to run virtual machine instructions directly. However, HAXM will 
only run on Intel processors that support Intel Virtualization Technology. 
But if your development machine is compatible, then HAXM will make 
your AVD run much faster. 


|-f iVs moved) 3 ^uitk 
web seav-fcb should 
tvafck it down. 
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4. Use Instant Run 


Since Android Studio 2.3, it’s been possible to redeploy apps 
much more quickly using the Instant Run utility. This utility 
allows Android Studio to recompile just the files that have 
changed, and then patch the application currently running on 
the device. This means that instead of waiting for a minute or so 
while the application is recompiled and deployed, you can see 
your changes running in just a few seconds. 

To use Instant Run, click on the Apply Changes option in the 
Run menu, or click on the lightning bolt icon in the toolbar: 


Clidk oh “this butfcoh i» the 
■toolbav -to apply changes 
using Instant Run. 



There are a couple of conditions on using Instant Run. First, 
your app’s target needs to be at least API 15. Second, you need 
to deploy to a device that runs API 21 or above. So long as you 
satisfy both these conditions, you’ll find that Instant Run is by far 
the fastest way of getting your code up and running. 
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^ The Top Ten Things ♦ 
(we didn’t cover) 


Even after all that, there’s still a little more. 

There are just a few more things we think you need to know. We wouldn’t feel right about 
ignoring them, and we really wanted to give you a book you’d be able to lift without 
extensive training at the local gym. Before you put down the book, read through these 
tidbits. 
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distribution 


1. distributing your app 

Once you’ve developed your app, you’ll probably want to make it 
available to other users. You’ll likely want to do this by releasing your 
app through an app marketplace such as Google Play. 

There are two stages to this process: preparing your app for release, 
and then releasing it. 


Preparing your app for release 

Before you can release your app, you need to configure, build, and 
test a release version of it. This includes tasks such as deciding on 
an icon for your app and modifying AndroidManifest. xml so that only 
devices that are able to run your app are able to download it. 

Before you release your app, make sure that you test it on at least one 
tablet and one phone to check that it looks the way you expect and its 
performance is acceptable. 

You can find further details of how to prepare your app for release 
here: 

http://developer, android, com/tools /publishing/preparing, html 


Releasing your app 

This stage includes publicizing your app, selling it, and distributing it. 

To release your app on the Play Store, you need to register for a 
publisher account and use the Developer Console to publish your 
app. You can find further details here: 

http://developer, android, com/distribute /go ogleplay/start, html 

For ideas on how to best target your app to your users and build a 
buzz about it, we suggest you explore the documents here: 

http://developer, android, com/distribute/index, html 
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Z. Content providers 

You’ve seen how to use intents to start activities in other apps. As 
an example, you can start the Messaging app to send the text you 
pass to it. But what if you want to use another app’s data in your 
own app? For example, what if you want to use Contacts data in 
your app to perform some task, or insert a new Calendar event? 

You can’t access another app’s data by interrogating its database, 
Instead, you use a content provider, which is an interface that 
allows apps to share data in a controlled way. It allows you to 
perform queries to read the data, insert new records, and update 
or delete existing records. 



Provider 


If you want other apps to use your data, you can create your own 
content provider. 

You can find out more about the concept of content providers here: 
http://developer, android, com/guide/topics/providers/content-providers, html 
Here’s a guide on using Contacts data in your app: 
http://developer, android, com/guide/topics/providers/contacts-provider. html 
And here’s a guide on using Calendar data: 

http://developer, android, com/guide/topics/providers/calendar-provider, html 
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loaders and sync adapters 


$. Loaders 


If you do a lot of work with databases or content providers, sooner or 
later you’ll encounter loaders. A loader helps you load data so that 
it can be displayed in an activity or fragment. 

Loaders run on separate threads in the background, and make it 
easier to manage threads by providing callback methods. They persist 
and cache data across configuration changes so that if, for example, 
the user rotates their device, the app doesn’t create duplicate queries. 
You can also get them to notify your app when the underlying data 
changes so that you can deal with the change in your views. 

The Loader API includes a generic Loader class, which is the 
base class for all loaders. You can create your own loader by 
extending this class, or you can use one of the built-in subclasses: 
AsyncTaskLoader or CursorLoader. AsyncTaskLoader 
uses an AsyncTask, and CursorLoader loads data from a 
content provider. 

You can find out more about loaders here: 

https://developer, android, com/guide/components /loaders, html 


4. Sync adapters 


Sync adapters allow you to synchronize data between an Android 
device and a web server. This allows you to do things like back up the 
user’s data to a web server, for instance, or transfer data to a device 
so that it can be used offline. 


Sync adapters have a number of advantages over designing your own 
data transfer mechanism. 


o 

o 

o 

o 


They allow you to automate data transfer based on specific criteria—for 
example, time of day or data changes. 

They automatically check for network connectivity, and only run when 
the device has a network connection. 

Sync adapter-based data transfers run in batches, which helps improve 
battery performance. 

They let you add user credentials or a server login to the data transfer. 


You can find out how to use sync adapters here: 

https://developer, android, com/training/sync-adapters /index, html 
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5. broadcasts 


Suppose you want your app to react in some way when a system event 
occurs. You may, for example, have built a music app, and you want 
it to stop playing music if the headphones are removed. How can your 
app tell when these events occur? 


Android broadcasts system events when they occur, including things 
like the device running low on power, a new incoming phone call, or 
the system getting booted. You can listen for these events by creating 
a broadcast receiver. Broadcast receivers allow you to subscribe 
to particular broadcast messages so that your app can respond to 
particular system events. 



Your app can also send custom broadcast messages to notify other apps 
of events. 

You can find out more about broadcasts here: 

https://developer, android, com/guide/components /broadcasts, html 
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6. The WebView class 

If you want to provide your users with access to web content, you 
have two options. The first option is to open the web content with 
an external app like Chrome or Firefox. The second option is to 
display the content inside your app using the WebView class. 

The WebView class allows you to display the contents of a web 
page inside your activity’s layout. You can use it to deliver an 
entire web app as a client application, or to deliver individual web 
pages. This approach is useful if there’s content in your app you 
might need to update, such as an end-user agreement or user guide. 

You add a WebView to your app by including it in your layout: 

<WebView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/webview" 
android:layout_width="match_parent" 
android:layout_height="match_parent" /> 

You then tell it which web page it should load by calling its 
loadUrl() method: 

WebView webView = (WebView) findViewByld(R.id.webview); 
webView.loadUrl("http://www.oreilly.com/"); 

You also need to specify that the app must have Internet access by 
adding the INTERNET permission to AndroidManifest.xml'. 

<manifest ... > 

<uses-permission android:name="android.permission.INTERNET" /> 


</manifest> 

You can find out more about using web content in your apps here: 
http://developer, android, com/guide/webapps/index, html 
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7. Settings 

Many apps include a settings screen so that the user can record 
their preferences. As an example, an email app may allow the user 
to specify whether they want to see a confirmation dialog before 
sending an email: 


This is -the settings 
S£\reen -Po\r the £jr»ail^^ 
app. 


N < 

© * is 


<- General settings 


n 

Gmail default action 

Conversation view 

Group emails in the same conversation for IMAR 
POP3 and Exchange accounts 

B 

Swipe actions 

In conversation list 


B 

Sender image 

Show beside name in conversation list 


B 

Reply all 

Use as default for message replies 


□ 

Auto-fit messages 

Shrink messages to fit the screen 


B 

Auto-advance 

Show conversation list after you archive or delete I 

Open web links in Gmail 

Turn on for faster browsing 



o 

V 

_ 

□ 



You build a settings screen for your app using the Preferences 
API. This allows you to add individual preferences, and record a 
value for each preference. These values are recorded in a shared 
preferences file for your app. 

You can find out more about creating settings screens here: 
https://developer, android, com/guide/topics/ui/settings, html 
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i. Animation 

As Android devices increasingly take advantage of the power of their 
built-in graphics hardware, animation is being used more and more to 
improve the user’s app experience. 

There are several types of animation that you can perform in Android: 

Property animation 

Property animation relies on the fact that the visual components 
in an Android app use a lot of numeric properties to describe their 
appearance. If you change the value of a property like the height or 
the width of a view, you can make it animate. That's what property 
animation is: smoothly animating the properties of visual components 
over time. 


View animations 

A lot of animations can be created declaratively as XML resources. 

So you can have XML files that use a standard set of animations (like 
scaling, translation, and rotation) to create effects that you can call from 
your code. The wonderful thing about declarative view animations is 
that they are decoupled from your Java code, so they are very easy to 
port from one app project to another. 

Activity transitions 

Let’s say you write an app that displays a list of items with names and 
images. You click on an item and you’re taken to a detail view of it. 

The activity that shows you more detail will probably use the same 
image that appeared in the previous list activity. 

Activity transitions allow you to animate a view from one activity that 
will also appear in the next activity. So you can make an image from 
a list smoothly animate across the screen to the position it takes in the 
next activity. This will give your app a more seamless feel. 

To learn more about Android animations see: 

https://developer, android, com/guide/topics /graphics /index, html 

To learn about activity transitions and material design, see: 

https://developer, android, com/training/material/animations, html 
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9. App widgets 


An app widget is a small application view that you can add to other 
apps or your home screen. It gives you direct access to an app’s core 
content or functionality from your home screen without you having to 
launch the app. 

Here’s an example of an app widget: 



This is a* app widget- l-t you 
direct access -to the app's lore 
■functionality Without you having 
to launch the app- 


To find out how you create your own app widgets, look here: 
http://developer, android, com/guide/topics/appwidgets/index, html 
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10. Automated testing 


All modern development relies heavily on automated testing. If 
you create an app that’s intended to be used by thousands or 
even millions of people, you will quickly lose users if it’s flaky or 
keeps crashing. 

There are many ways to automatically test your app, but they 
generally fall into two categories: unit testing and on-device 
testing (sometimes called instrumentation testing). 

Unit tests 

Unit tests run on your development machine, and they check 
the individual pieces—or units—of your code. The most 
popular unit testing framework is JUnit, and Android Studio 
will probably bundle JUnit into your project. Unit tests live in 
the app/src/test folder of your project, and a typical test method 
looks something like this: 


@Test 

public void returnsTheCorrectAmberBeers() { 

BeerExpert beerExpert = new BeerExpert(); 

assertArrayEquals(new String[]{"Jack Amber", "Red Moose"}, 
beerExpert.getBrands("amber").toArray()); 


You can find more out about JUnit here: 
http://junit.org 
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On-device tests 

On-device tests run inside an emulator or physical device and check 
the fully assembled app. They work by installing a separate package 
alongside your app that uses a software layer called instrumentation 
to interact with your app in the same way as a user. An increasingly 
popular framework for on-device testing is called Espresso, and 
Android Studio will probably bundle it in to your project. On-device 
tests live in the app/src/androidTest folder, and Espresso tests look 
something like this: 


@Test 

public void ifYouDoNotChangeTheColorThenYouGetAmber() { 

onView(withld(R.id.find_beer)).perform(click()); 
onView(withld(R.id.brands)).check(matches(withText( 
"Jail Pale Ale\nGout Stout\n"))); 


When you run an on-device test, you will see the app running on your 
phone or tablet and responding to keypresses and gestures just as if a 
person were using it. 

You can find out more about Espresso testing here: 

https://developer, android, com/training/testing/ui-testing/espresso-testing, html 
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action bar, 314. See also app bar 
ActionBarActivity class, 298 
ActionBar class, 306,314 
ActionBarDrawerToggle class, 607 
actions 
about, 100 
in app bar 

adding, 315-317,319-325 
icons for, 320, 322 
menu for, 321,323 
method for, 324-325 
title for, 320, 322 
category specified with, 106, 117 
determining activities for, 105-106 
share actions, 332-335 
specifying in an intent, 100-104 
types of, 101 
activities 

about, 2, 12, 31, 38, 120-121 
backward compatibility for, 295, 298 
calling custom Java classes from, 71-74 
calling methods from, 59-62 
class hierarchy for, 139,297 
class name for, 85 
converting to fragments, 438-449 
creating, 13-14, 61, 67-68 
declaring in manifest hie, 85 
default, 41 

editing. See code editor; design editor 
location in project, 17 
main, specifying, 84, 120 
multiple 
chaining, 78 
creating, 78-83 
passing text to, 90-95 
retrieving text from, 96-97 
starting with intents, 86-89 


navigating. See navigation 
organizing, 249-255, 290-291 
category activities, 249-250, 252-255, 267-268, 
277-278 

detail/edit activities, 249-250, 253-255, 279-283 
top-level activities, 249-250, 252-255 
in other apps 

determining from actions, 105— 106 
none available, 117 
starting with intents, 99-104 
users always choosing, 112-117 
users choosing default, 111 
users choosing if multiple, 100, 104, 111 
parent activity, 328 
states of. See activity lifecycle 
Activity class, 61, 139,297 
activity lifecycle 
about, 137-138, 146-147 
class hierarchy for, 139 
compared to fragment lifecycle, 439 
methods associated with, 137-139, 147, 167,439 
states in 

based on app’s focus, 154-157 
based on app’s visibility, 146-147 
listof, 137-138,146-147 
saving and restoring, 140—141, 145 
ActivityN otF oundException, 103, 117 
activity transitions, 868 
adapters 

array. See ArrayAdapter class 
decoupling, with interface, 572-574 
recycler view. See recycler view adapter 
sync adapters, 864 
AdapterView class, 261,269 
adb (Android Debug Bridge) 
about, 846, 850-851 
copying hies, 855 
killing adb server, 854 
logcat output, 854 
running a shell, 852-853 
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ADD COLUMN command, 650 
addDrawerListenerQ method, DrawerLayout, 607 
ALTER TABLE command, 649 
Android application package. See APK files 
Android apps. See also projects 
about, 120-121 
activities in. See activities 

adapting for different device sizes, 340-341, 394-398, 
402-412 

app bar for. See app bar 

back button functionality for, 413-415 

building, 7-10, 13-15, 39 

configuration of, affected by rotation, 134-136, 145, 
156 

designing, 248-250 

devices supported by, 10, 340-341. See also fragments 

distributing, 862 

examples of. See examples 

focus/visibility of, 146-147, 154-157 

icons for, 84, 299 

Java for. See Java 

languages used in, 4 

layouts for. See layouts 

manifest file for. See AndroidManifest.xml file 
minimum SDK for, 10-11 
navigating. See navigation 
package name for, 9, 84 
processes used by, 120-121,133 
resource files for. See resource files 
running activities in other apps, 100-108 
running in emulator, 23-30, 49, 117 
running on physical devices, 109-111, 117 
settings screen for, 867 
structuring, 249-250, 252-255, 290-291 
theme for. See themes 
Android debug bridge. See ADB 
Android devices 
about, 2 

adapting apps for different sizes of, 340-341, 394-398, 
402-412. See also fragments 
API level on. See Android SDK (API level) 
rotation of 

configuration affected by, 134-136, 145, 156 
saving activity state for, 140—141 
saving fragment state for, 427-431 
running apps on, 109-111,117 
virtual, for testing. See AVD (Android virtual device) 


Android emulator 
about, 23 

performance of, 858-860 
running apps in, 23-30, 49, 117 
AndroidManifest.xml hie 
about, 17,84-85 
activity hierarchy in, 328 
app bar attributes in, 299-301,318-319 
intent Liters in, 105-106 
language settings in, 172 
main activity in, 120,132 
permissions needed in, 791 
screen size settings in, 403 
started services in, 745 
themes in, 589 
Android platform 
about, 2—3 

versions of. See Android SDK (API level) 

Android Runtime (ART), 3, 30, 842-843 
Android SDK (API level) 
about, 5 

features specific to, 171, 173, 293, 297, 298, 314, 328 
libraries for, 16,294 
list of, 11 

permissions affected by, 791,794 
specifying for AVD, 25, 400 
specifying minimum for apps, 10 
Android Studio 
about, 5, 7 
alternatives to, 7 
console in, 28 

editors. See code editor; design editor 
installing, 6 
projects, creating, 8-10 
system requirements, 6 
Android virtual device. See AVD 

animated toolbar. See collapsing toolbar; scrolling toolbar 
animation, 868 

API level. See Android SDK (API level) 

APK files, 27,30,845-846 
app bar 

about, 291-293 

activity titles in, 317 

adding actions to, 315-317,319-3 25 

attributes in manifest file for, 299-301,318-319 

icon in, 299 

label for, 299,318-319 
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removing, 308 

replacing with toolbar, 292, 306-313 
sharing content on, 331-335 
tabs in, 499-500 

themes required for, 293, 296-298, 299-300 
Up button for, 327-330 
AppBarLayout element, 499-500, 518-519 
App Comp at Activity class, 297-298, 307 
AppGompat Library. See v7 AppGompat Library 
app folder, 17 

application framework, 3. See also APIs 
application name, 9 
applications, core. See core applications 
app_name string resource, 51 
apps. See Android apps 
AppTheme attribute, 589-590 
app widgets, 869 

ArrayAdapter class, 269-271, 275, 287, 375-377 
@array reference, 57 
array resources, 56-57,210,259 
ART (Android Runtime), 3, 30, 842-843 
AsyncTask class, 724,729,731,737 
?attr reference, 309 
automated testing, 870 
AVD (Android virtual device) 
about, 23 

compared to design editor, 49 
creating for smartphone, 24—26 
creating for tablet, 399-401 
AWT, 4 

B 

Back button 

compared to Up button, 327 
enabling, 413-415 

background, services running in. See services 
background thread, 720-7 31, 736 
back stack, 414-415 

backward compatibility, for activities, 295, 298 
Bates, Bert (Head First Java), 4 
Beer Adviser app, 38-76 
activities, 61-69 
button, 59-60 
Java class, 70-74 
layout, 41-48 


project, 40 
spinner, 56-58 
String resources, 50-54 
Beighley, Lynn (Head First SQL), 675 
biases for views, 231 
Binder class, 786 

bindServiceO method, activity, 778 
blueprint tool 
about, 226 
aligning views, 238 
biases, setting, 231 
centering views, 230 
horizontal constraints, 227 
inferring contraints, 240—241,245 
margins, setting, 228 
size of views, changing, 232-233 
vertical constraints, 228 
view properties, editing, 241 
widgets, adding, 226, 240, 242-243 
books and publications 
Head First Java (Sierra; Bates), 4 
Head First SQL (Beighley), 675 
bound services 
about, 740, 768 

binding to an activity, 771, 774-7 7 8 
calling methods from, 780—785 
in combination with started services, 786 
compared to started services, 786 
creating, 770, 772 
displaying results of, 773 
lifecycle of, 787-788 
other apps using, 786 
broadcasts, 865 
build folder, 17 
build.gradle hies, 834—835 
built-in services 
about, 740 

location. See Location Services 
notification. See notification service 
Bundle class 
about, 145 

restoring state data from, 141, 144 
saving state data in, 140, 143 
Button element. See also FAB (Boating action button) 
about, 203 
adding, 43 
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calling methods 
in activity, 60-62 
in fragment, 452—460 
code for, 44-47, 80 
images added to, 213 
widget for, in blueprint tool, 226 

C 

CalledFromWrongThreadException, 127 
cardCornerRadius attribute, card view, 543 
cardElevation attribute, card view, 543 
GardView element, 543 
GardView Library, 294, 542 
card views 
about, 542 

adding data to, 545, 550 
creating, 543—544 
displaying in recycler view, 558, 560 
CatChat app, 581-620 
about, 581-584 
Drafts option, 586 
Feedback option, 592 
header for, 594—595 
Help option, 591 
Inbox option, 585 
menu for, 596-601 
Sentltems option, 587 
Trash option, 588 

category activities, 249-250, 252-255, 267-268, 277— 
278, 290 

centering views, 230 
chaining activities, 78 

change Cur sor() method, cursor adapter, 715-717 
checkableBehavior attribute, 598 
CheckBox element, 206-207, 696-700 
checkSelfPermissionQ method, ContextCompat, 794, 
800 

check task, Gradle, 837 

choosers, 112-117 

classes. See Java classes 

clean task, Gradle, 837 

closeDrawerQ method, DrawerLayout, 614 

close() method, cursor, 672, 683 

closeQ method, SQLiteDatabase, 672, 683 


code editor 
about, 18, 32 
activity hie in, 21-22 
layout hie in, 19-20, 41, 44-46 
collapsing toolbar, 507, 517-525 
C ollapsingToolbarLayout element, 518-5 21 
color resources, 304 
colors, for themes, 303 
columnCount attribute, GridLayout, 823 
company domain, 9 
constraint layout 
about, 223 
aligning views, 238 
alternatives to, 245 
biases, setting, 231 
centering views, 230 
horizontal constraints, adding, 227 
inferring contraints, 240—241,245 
library for, 224 
margins, setting, 228-229 
size of views, changing, 232-233 
specifying in main activity, 225 
vertical constraints, adding, 228 
widgets, adding, 226, 240, 242-243 
XML code for, 229 
Constraint Layout Library, 224, 294 
contentDescription attribute, ImageView, 212 
content providers, 863 

contentScrim attribute, GollapsingToolbarLayout, 523 
GontentValues object, 632, 645 
Context class, 139,752 
ContextThemeWrapper class, 139 
ContextWrapper class, 139,752 
CoordinatorLayout element, 508-511, 518, 527 
core applications, 3 
core libraries, 3. See also libraries 
createChooserQ method, Intent, 112-117 
CREATE TABLE command, 631 
Cursor class, 624 
cursors, SQLite 
about, 624, 663 

adapter for, 679-681, 688-689, 715 
closing, 672, 682-683 
creating, 663-666, 678 
navigating to records in, 670-671 
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refreshing, 714—718 
retrieving values from, 67 2—6 74 
custom Java classes. See Java classes 

D 

data 

adapters for. See adapters 

from other apps, content providers for, 863 

loaders for, 864 

sharing with other apps. See share action provider 
storing as string resources, 259 
storing in classes, 256, 268-271, 360 
web content, 866 
database. See SQLite database 
deleteO method, SQLiteDatabase, 647 
density-independent pixels (dp), 171 
design editor. See also blueprint tool 
about, 18, 32, 42 
adding GUI components, 43 
compared to AVD, 49 
XML changes reflected in, 48 
Design Support Library 
about, 294, 506 

AppBarLayout element, 499-500 
collapsing toolbar, 517-5 2 5 
FAB (floating action button), 507, 526-529 
navigation drawers, 584 
scrolling toolbar, 508-515 
snackbar, 507, 526, 530-533 
TabLayout element, 499,501 
detail/edit activities, 249-250, 253-255, 279-283, 290 
development environment. See Android SDK; Android 
Studio 

devices. See Android devices 
DEX hies, 843-845,847 
dimension resources, 174 
dimens.xml hie, 174 
distributing apps, 862 

doInBackgroundO method, AsyncTask, 724, 726, 731 
dp (density-independent pixels), 171 
drawable attributes, Button, 213 
@drawable reference, 212 
drawable resource folders. See image resources 
DrawerLayout element, 602-603. See also navigation 
drawers 


drop-down list. See Spinner element 
DROP TABLE command, 650 
dynamic fragments. See fragments: dynamic 

E 

editors. See blueprint tool; code editor; design editor 
EditText element 
about, 80, 178, 202 
code for, 80 
hint, 178 

email app example. See CatChat app 
email grid layout example, 825-832 
emulator. See Android emulator 
entries attribute, ListView, 259 
entries attribute, Spinner, 57, 210 
Espresso tests, 871 
event listeners 
about, 199 

for card views, 5 72-5 76 
compared to onClick attribute, 264 
for ListView element, 261-263 
for fragments, 455—460 
for list fragments, 385-387 
for ListView element, 708, 710-712 
location listeners, 792 
for navigation drawers, 608 
for snackbar actions, 530 
examples 

Beer Adviser app. See Beer Adviser app 
CatChat app. See CatChat app 
email grid layout, 825-832 
Joke app. See Joke app 

My Constraint Layout app. See My Constraint Layout 
app 

My First App. See My First App 
My Messenger app. See My Messenger app 
Odometer app. See Odometer app 
Pizza app. See Pizza app 
source code for, xxxvi 

Starbuzz Coffee app. See Starbuzz Coffee app 
Stopwatch app. See Stopwatch app 
Workout app. See Workout app 
execSQLO method, SQLiteDatabase, 631, 650 
executeQ method, AsyncTask, 731 
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F 

FAB (floating action button), 507, 526-529 
findViewByldO method, view, 63-64, 68 
FloatingActionButton element, 527 
focus 

activities having, 154—157 
views handling, 199 
Fragment Activity class, 354 
fragment element, 352, 463 
fragment lifecycle, 365-366, 439 
fragment manager, 362,419 
FragmentPagerAdapter class, 491-493 
fragments 
about, 342 
activities using 

adding fragment to, 352-353 

button linking main to detail activity, 346-347 

creating, 345 

interactions with, 359-369 
referencing fragment from, 363, 367 
setting values for, 367-369 
adding to project, 348-349 
app structure for, 343-344 
back button functionality with, 413-415 
code for, 349-350 
converting activities to, 438-449 
data for, 360 
dynamic 
about, 434 

adding, 435-449, 469-477 
calling methods from, 450—460 
code for, 440-446, 458-460 
layout for, 447-449 
ID for, 361-362 
layouts for, 349-351, 408-410 
list fragments 

connecting data to, 3 75-3 7 7 
connecting to detail activity, 384-389 
creating, 372-374 
displaying in main activity, 378-381 
listener for, in main activity, 385-387 
methods associated with, 365-366, 439 
nested, 474—477 

replacing programmatically, 416-425 
state of, saving, 427-431, 464-467 


swiping through, 489-493 
for tab navigation, 483-488 
v7 AppGompat Library for, 345, 354 
view for, creating, 350 
FragmentStatePagerAdapter class, 491, 493 
fragment transactions, 419-423, 463-467, 472-475 
FrameLayout element 
about, 188-190, 193 
gravity for view placement, 190 
height, 188 
nesting, 191-192 
order of views in, 190 

replacing fragments programmatically using, 416-425, 
464-467, 471 

width, 188 

G 

getActivityO method, Pendinglntent, 758 
getBestProvider() method, LocationManager, 793 
getCheckedRadioButtonldO method, RadioGroup, 208 
getGhildFragmentManagerQ method, fragment, 474— 
475 

getContextO method, Layoutlnflator, 376 
getGountQ method, FragmentPagerAdapter, 491-492 
getFragmentManagerQ method 
activity, 362 
fragment, 472-473 

getlntentO method, activity, 92, 96, 280 
getlntExtraQ method, Intent, 92 
getltemCountO method, RecyclerView.Adapter, 547 
getltemQ method, FragmentPagerAdapter, 491-492 
get*0 methods, cursor, 672 

getReadableDatabaseO method, SQLiteOpenHelper, 

662, 678 

getSelectedltemQ method, view, 67, 69, 210 
getStringExtraQ method, Intent, 92, 96 
getStringO method, string resource, 115 
getSupportActionBarQ method, activity, 329 
getSupportFragmentManagerQ method, activity, 362 
getTextO method, EditText, 202 
getViewO method, fragment, 367, 370 
getWritableDatabaseQ method, SQLiteOpenHelper, 662 
GPS location provider, 793 
Gradle build tool 
about, 7, 834 
build.gradle hies, 834-835 
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check task, 837 
custom tasks, 839 
dependencies used by, 838 
gradlew and gradlew.bat files, 836 
plugins, 840 

gradlew and gradlew.bat files, 836 
gravity attribute, view, 182-183 
GridLayout element 
about, 823 

adding views to, 824, 827-829 
creating, 825-832 
dimensions, defining, 823, 826 
GridLayoutManager class, 556-557 
group element, 598-599 

GUI components. See also views; specific GUI compo¬ 
nents 
adding, 43 

inherited from View class, 44, 197-198 
referencing, 63—64 

H 

Handler class, 128-129 

HAXM (Hardware Accelerated Execution Manager), 
859 

headerLayout attribute, 602 
Head First Java (Sierra; Bates), 4 
Head First SQL (Beighley), 675 
heads-up notification, 755, 757 
hint attribute, EditText, 178, 202 
horizontal constraints, 227 
HorizontalScrollView element, 215 

I 

IBinder interface, 786 
IBinder object, 770-771,776 
icon attribute, 299, 322 
icons 

for actions in app bar, 320 
for app, default, 84, 299 
built-in icons, 597 
id attribute, view, 44, 175 

IDE 

Android Studio as. See Android Studio 
not using, 7 

ImageButton element, 214 


image resources. See also icons; mipmap resource folders 
adding, 189,211,257,512 
for Button elements, 213 
for ImageButton elements, 214 
for ImageView element, 212, 258 
for navigation drawer header, 594 
R.drawable references for, 212, 257 
resolution options, folders for, 211 
ImageView element, 211-212, 258, 523 
include tag, 312, 314 
inflateO method, Layoutlnflator, 350 
inflators, layout, 350, 365 
inputType attribute, EditText, 202 
insertQ method, SQLiteDatabase, 632-633 
installDebug task, Gradle, 837 
Instant Run, 860 
IntelliJ IDEA, 5 
intent filter, 105— 106 
intents 
about, 86 
alternatives to, 91 
category for, 106, 117 
creating, 86-87, 277 
implicit and explicit, 101,105,117 
passing text using, 90-95 
resolving activities and actions, 105-106 
retrieving data from, 280-282 
retrieving text from, 96—97 
sharing content using, 331 
starting activities, 86-89 
starting activities in other apps, 99-104 
IntentService class, 742, 744, 752 
internationalization. See localization 
isGheckedQ method, CheckBox, 206 

J 

Java 
about, 2 

activities. See activities 
required knowledge of, xxxvi, 4 
source file location, 16-17 
Java classes 
about, 38 

calling from activities, 71—74 
custom, creating, 70, 256 
data stored in, 256, 268-271 
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java folder, 17 

Java Virtual Machine (JVM), 842 
JDBC, 624 
Joke app 

logging messages, 743-746 
notifications, 755-766 
started services, 741-766 
JUnit, 870 

JVM Java Virtual Machine), 842 

L 

label attribute, application, 299, 314, 318 
layout_above attribute, RelativeLayout, 822 
layout_align* attributes, RelativeLayout, 820, 822 
layout_behavior attribute, ViewPager, 510, 519 
layout_below attribute, RelativeLayout, 822 
layout_center* attributes, RelativeLayout, 820 
layout_collapseMode attribute, Toolbar, 519, 523 
layout_column attribute, GridLayout, 827 
layout_columnSpan attribute, GridLayout, 828 
layout_gravity attribute, view, 47, 184-185, 190 
layout_height attribute 
FrameLayout, 188 
LinearLayout, 171 
view, 44, 46, 47, 175, 180, 232-233 
Layoutlnflator class, 350,365,376 
layout manager, for recycler view, 556-557 
layout_margin attributes, view, 47, 176, 228-229 
layout resource folders, 402-408 
layout_row attribute, GridLayout, 827 
layouts 

about, 2, 12, 31, 38, 170 

code for, 19-20, 33, 41, 44-46, 80 

constraint. See constraint layout 

creating, 13—14 

default, 41 

editing, 41-48 

for fragments. See fragments 

frame. See FrameLayout element 

grid. See GridLayout element 

inherited from ViewGroup class, 198, 200 

linear. See LinearLayout element 

nesting, 191-192, 222 

relative. See RelativeLayout element 

toolbars as, 311-313,316 


layout_scrollFlags attribute, Toolbar, 510, 519 
layout_to* attributes, RelativeLayout, 822 
layout_weight attribute, view, 179-181 
layout_width attribute 
FrameLayout, 188 
LinearLayout, 171 
view, 44, 46, 47, 175, 232-233 
libraries. See also specific libraries 
about, 3 

adding to project, 224 
location in project, 16 
Support Libraries, list of, 294 
LinearLayout element 
about, 41,45, 171, 187 
dimension resources, 174 
gravity for view contents, 182-183 
gravity for view placement, 184-185 
height, 171 
nesting, 191-192, 222 
order of views in, 175 
orientation, 172 
padding, 173 

weight of views in, 179—181 
width, 171 

xmlns:android attribute, 171 
LinearLayoutManager class, 556-557 
Linux kernel, 3 

Listener interface, 385-387, 572-576 
listeners. See event listeners 
ListFragment class 
connecting data to, 3 75-37 7 
connecting to detail activity, 384—389 
creating, 372-374 
displaying in main activity, 378-381 
listener for, in main activity, 385-387 
ListView element 
about, 251 

class hierarchy for, 570 
creating, 259-260, 705-709 
event listeners for, 261-263, 708, 710-712 
loaders, 864 
localization 

right-to-left languages, 172 
String resources, 50, 55 
LocationListener class, 792 
LocationManager class, 793 
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Location Services 
about, 789 

distance traveled, calculating, 796-797 
library for, 790 
listener for, 792 
manager for, 793 
permissions needed 
checking for, 794,800 
declaring, 791 

notification if denied, 806, 809-810 
requesting from user, 802-804, 806 
provider for, 793 

requesting location updates, 794-795 
stopping location updates, 797 
logcat, viewing, 743, 854 
Log class, 743 
logging messages, 743-746 

M 

main activity, 84, 120 
manifest file. See AndroidManifest.xml file 
material design, 506. See also Design Support Library 
menu attribute, Navigation View, 602 
menu element, 321 
menu resource folders, 321 
messages. See also notification service 
logging, 743-746 
pop-up messages (toasts), 216 
methods. See also specific methods 
calling from activities, 59-62, 81 
creating, 62-63, 65-66, 81 
name of, 69 

mipmap resource folders, 299 
moveToFirstQ method, cursor, 671 
moveToLastO method, cursor, 671 
moveToNextQ method, cursor, 671 
moveToPreviousQ method, cursor, 671 
My Constraint Layout app, 223-246 
activities, 225 
layout, 226-243 
library, 224 
String resources, 225 
My First App, 7-36 
activities, 12-15, 31 
editors, 18-22 


emulator, 23-30 
folder structure, 16-17 
layout, 31—34 
project, 8-11 

My Messenger app, 79-118 
activities, 82-83, 90 
choosers, 112-117 
intents, 86-89, 92-108 
layout, 80, 82—83, 91 
manifest file, 84-85 
running on device, 109-111 
String resources, 81 

N 

navigation. See also app bar; ListView element; navigation 
drawers; tab navigation; toolbar 
about, 250-251,253-255,291 
Back button, 327,413-415 
Up button, 292, 327-330 
navigation drawers 
about, 580-583 

adding to main activity, 583, 602-604 
closing the drawer, 606, 614 
compared to tab navigation, 580 
drawer toggle for, 606-607 
fragments for, 583, 585-592 
header for, 583, 593-595 
libraries for, 584 

menu click behavior, 606, 608-613 

menu options for, 583, 593, 596-601 

multiple, 614 

submenu in, 600 

theme for, 589-590 

toolbar for, 589 

Navigation View element, 602-603, 608 
NestedScrollView element, 513, 518-519 
network location provider, 793 
NotificationManager class, 759 
Notification object, 759 
notification service 
about, 755, 762-763 
action for, adding, 758 
heads-up notification, 755, 757 
issuing a notification, 759, 806, 809-810 
library for, 756 
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notification builder for, 757 
notification manager for, 759 
notifyO method, NotificationManager, 759 

0 

OAT format, 847 
Odometer app, 769-816 
bound services, 769-788 
library, 790 

Location Services, 789-800 
permissions, 791, 802-816 
onActivityGreatedQ method, fragment, 365 
onAttachO method, fragment, 365 
onBindQ method, Service, 770, 787-788 
onBindViewHolder() method, RecyclerView.Adapter, 
550, 571 

onButtonGlickedQ method, activity, 203, 214 
onGheckboxGlickedQ method, CheckBox, 207 
onClick attribute 
Button, 60, 125, 203, 264 
CheckBox, 207,698-700 
ImageButton, 214 
RadioButton, 209 
Switch, 205 
ToggleButton, 204 
onClickDoneO method, activity, 529 
OnClickListener interface, 455—460 
onGlickListenerO method, view, 530 
onGlickQ method 
fragment, 456 
Listener, 572 
OnClickListener, 455 
onCreate() method 

activity, 61, 81, 96, 121, 133, 137, 138, 147, 167, 
787-788 

fragment, 365, 429, 430 
service, 751 

SQLiteOpenHelper, 628, 634-635 
onGreateOptionsMenuQ method, activity, 323 
onGreateViewHolderQ method, ViewHolder, 549 
onCreateViewO method, fragment, 349-350, 365, 374, 
376 

onDestroyO method 

activity, 137, 138, 147, 167, 683, 787-788 


fragment, 365 
service, 751 

onDestroyViewO method, fragment, 365 
onDetachO method, fragment, 365 
on-device tests, 871 

onDowngradeQ method, SQLiteOpenHelper, 637, 641 
onHandleEvent() method, IntentService, 742 
onHandlelntentO method, IntentService, 744 
OnltemClickListener class, 261-262 
onltemClickQ method, OnltemClickListener, 261—262 
onListltemClickQ method, list fragment, 373, 386 
onLocationGhangedQ method, LocationListener, 792 
onNavigationltemSelectedQ method, activity, 608-609 
onOptionsItemSelectedQ method, activity, 324 
onPauseQ method 
activity, 154-157, 159, 167 
fragment, 365 

onPostExecuteO method, AsyncTask, 724, 728 
onPreExecuteO method, AsyncTask, 724—725 
onProgressUpdateQ method, AsyncTask, 727 
onProviderDisabledQ method, LocationListener, 792 
onProviderEnabledQ method, LocationListener, 792 
onRadioButtonClickedQ method, RadioGroup, 209 
onRequestPermissionResultQ method, activity, 805 
onRestartf) method, activity, 146, 147, 153, 167 
onResumeQ method 
activity, 154-157, 159, 167 
fragment, 365 

onSavelnstanceStateQ method 
activity, 140, 142, 143, 146 
fragment, 429,431 

onServiceConnectedQ method, ServiceConnection, 
775-776 

onServiceDisconnectedQ method, ServiceConnection, 
775, 111 

onStartCommandQ method, Service, 751 
onStartf) method 
activity, 146, 147, 153, 167 
fragment, 365, 367 

onStatusChangedQ method, LocationListener, 792 
onStopO method 
activity, 146, 147, 148-150, 167 
fragment, 365 

onSwitchClickedO method, Switch, 205 
onToggleClickedQ method, ToggleButton, 204 
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onUnbindQ method, Service, 787-788 
onUpgradeO method, SQLiteOpenHelper, 628, 637, 
640, 642-650 

Oracle JVM Java Virtual Machine), 842 
orderlnCategory attribute, 322 
organizing ideas. See also Starbuzz Coffee app 
orientation attribute, Linear Layout, 45, 172 

p 

package name, 84 

padding attributes, LinearLayout, 17 3 
parent activity, 328 
Pendinglntent class, 758 
performance 

of Android emulator, 858-860 
SQLite database affecting, 720 
permissions 

API levels affecting, 791, 794 
checking for permissions granted, 794, 800 
declaring permissions needed, 791 
denied, issuing notification of, 806, 809-810 
requesting from user, 802-804, 806 
Pizza app, 290-338, 482-536, 538-578 
actions, 315-326 
activities, 297-298 
adapters, 571-574 
app bar, 291-293,299 
card views, 543-546, 550, 560 
collapsing toolbar, 517-5 2 5 
color resources, 304 
FABs, 526-529 
fragments, 485-488 
layout, 305 

libraries, 294-296, 307, 506 
recycler views, 538-539, 545-570, 575-576 
scrollbars, 508-515 
share action provider, 331-336 
snackbar, 526, 530-534 
tab navigation, 498-504 
themes and styles, 300-303 
toolbar, 306-314 
Up button, 327-329 
ViewPager, 489-493 
Play Store, releasing apps to, 862 
pop-up messages (toasts), 216 


postDelayedf} method, Handler, 128-129 
post() method, Handler, 128-129 
Preferences API, 867 

processes, apps using, 120-121, 133. See also services; 
threads 

projects. See also Android apps 
application name, 9 
company domain, 9 
creating, 8-10, 40-41 
hies in, 15-17,34 
libraries for, adding, 224 
location, 9 

property animation, 868 
publishProgressO method, AsyncTask, 727 
putExtraf) method, Intent, 92, 101 
put() method, GontentValues, 632 

Q. 

QEMU (Quick Emulator), 858 

query0 method, SQLiteDatabase, 663-666 

R 

RadioButton element, 208 
RadioGroup element, 208-209 
Random class, 772 

R. drawable reference, 212,257 

recycler view adapter, 545-550, 554, 571-574 
RecyclerView.Adapter class, 545-546 
RecyclerView element, 554 
RecyclerView Library, 294 
recycler views 
about, 538-539 
class hierarchy for, 570 
creating, 553-555, 562-565 
data for, 547, 550 
layout manager for, 556-557 
responding to clicks, 566-576 
scrollbars for, 554 
views for, 548-549 
RecyclerView-v7 Library, 542 
RelativeLayout element 
about, 818 

positioning relative to other views, 821-822 
positioning relative to parent, 818-820 
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releasing apps, 862 

removeUpdatesO method, LocationManager, 797 
RENAME TO command, 649 
render thread, 720 

requestLocationUpdatesQ method, LocationManager, 
794 

requestPermissionsQ method, Activity Comp at, 803-804, 
806 

res-auto namespace, 543 
res folder, 17 
resolution of images, 211 

resource hies. See also array resources; image resources; 
String resources 
about, 2 

color resources, 304 
dimension resources, 174 
layout resources, 402-408 
menu resources, 321 
mipmap resources, 299 
style resources, 300-301 
types of, folders for, 16-17, 403 
resources. See books and publications; website resources 
resources element, 54 
R.java hie, 17, 63, 69 
rotation of device 

conhguration changed by, 134—136, 145, 156 
saving activity state for, 140-141 
saving fragment state for, 427-431 
roundlcon attribute, 299 
rowGount attribute, GridLayout, 823 
Runnable class, 128 

s 

Safari Books Online, xl 
scale-independent pixels (sp), 201 
scheduled services, 740 
screens 

activities in. See activities 
density of, images based on, 211 
layouts for. See layouts 

size of, adapting apps for, 340-341, 394-398, 402-412 
scrollbars attribute, recycler view, 554 
scrolling toolbar, 507, 508-515 
ScrollView element, 215 
SDK. See Android SDK (API level) 


Service class, 752, 770 
Service Connection interface, 1 lb-111 
service element, 745 
services 
about, 740 

bound. See bound services 
built-in, 740 

location. See Location Services 
notihcation. See notihcation service 
scheduled, 740 
started. See started services 
setActionQ method, Snackbar, 530 
setAdapter() method 
List View, 270 
RecyclerView, 554 
ViewPager, 493 

setContentDescriptionQ method, ImageView, 212, 282 
setContentlntentQ method, notihcation builder, 758 
setContentViewO method, activity, 61, 133, 137, 363 
setDisplayHomeAsUpEnabledQ method, ActionBar, 329 
setlmageResourceQ method, ImageView, 212, 282 
setListAdapterQ method, fragment, 376 
setNavigationltemSelectedListenerQ method, Navigation- 
View, 608 

setSharelntentO method, ShareActionProvider, 333 
setSupportActionBarQ method, App Comp at Activity, 

313, 314, 317 

setTextQ method, TextView, 64, 201, 282 
settings screen, 867 
setTypeO method, Intent, 101 
setupWithViewPagerQ method, TabLayout, 501 
share action provider, 292, 331-335 
shell, running with adb, 852-853 
shortcuts. See app bar 
showAsAction attribute, 322 
Sierra, Kathy (Head Lirst Java), 4 
signing APK hies, 845 
SimpleCursorAdapter class, 681 
slider. See Switch element 
snackbar, 507, 526, 530-533 
SnackBar class, 530 
Spinner element 
about, 47,48,210 
setting values in, 64 
values for, 56-57 
sp (scale-independent pixels), 201 
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SQLite database 
about, 623-624 

accessing in background thread, 720-731, 736 

adding columns, 649, 650 

alternatives to, 624 

closing, 672, 682-683 

conditions for columns, 647 

conditions for queries, 666 

creating, 629, 634-635 

cursors 

about, 624, 663 

adapter for, 679-681, 688-689, 715 
closing, 672, 682-683 
creating, 663-666, 678 
navigating to records in, 670-671 
refreshing, 714—718 
retrieving values from, 67 2—6 74 
data types in, 630 
deleting records, 647 
deleting tables, 650 
downgrading, 641 
DrinkActivity. See DrinkActivity 
hies for, 623 

getting a reference to, 662, 678 
helper, 624, 626-628, 634-635 
inserting data in, 632-633 
location of, 623, 624 
ordering records from query, 665 
performance of, 720, 736 
querying records, 663-666 
renaming tables, 649 
security for, 624 
tables in, 630-631 
updating records 
programmatically, 645—647 
from user input, 695-703, 705-706, 708-712 
upgrading, 637-640, 642-650 
version number of, 637-639 
SQLiteDatabase class, 624 
SQLiteException, 662, 675 
SQLiteOpenHelper class, 624, 627-628 
SQL (Structured Query Language), 631, 675 
src attribute, ImageButton, 214 
src attribute, Image View, 212 
src folder, 17 

StaggeredGridLayoutManager class, 556-557 


Starbuzz Coffee app, 248-288, 622-656, 658-692, 
694-738 

activities, 248-249, 252-255, 262-264, 267-272 
adapters, 269-271 

database, 626-656,659-692,694—718 

DrinkActivity. See DrinkActivity 

image resources, 257 

intents, 277-285 

Java classes, 256 

layout, 258-260 

listeners, 261-262, 276 

navigation, 250-251 

threads, 720-738 

top level activity 

adding favorites to. See top level activity 
startActivityO method, activity, 86, 112, 117, 121 
started services 
about, 740-741, 748 
class hierarchy for, 752 
in combination with bound services, 786 
compared to bound services, 786 
creating, 741—742, 744 
declaring in AndroidManifest.xml, 745 
lifecycle of, 750-751 
methods associated with, 750-752 
starting, 746-747 

startServiceO method, Intent, 747, 751 
states, of activities. See activity lifecycle 
Stopwatch app, 122-168, 434—480 
activities, 125-127, 130-133 
activity lifecycle, 138-139, 146-163 
activity states, 134-144 
dynamic fragments, 434—436, 444—460 
fragment lifecycle, 439 
fragment transactions, 463-469, 472-475 
handlers, 128-129 
layout, 123-124,471 
project, 122 
String resources, 123 
string-array element, 56 
string element, 54 
@string reference, 52,81 
String resources 
about, 38, 50, 54, 55 
action titles in, 320 
adding, 512,517 


you are here ► 885 


the index 


arrays of, 56-57, 210, 259 
creating, 51,81 
getting value of, 115 
location of, 54, 55 
referencing strings in, 52, 81 
updated in R.java file, 69 

strings.xml file. See Array resources; String resources 

Structured Query Language. See SQL 

style element, 301 

@style reference, 300 

style resources, 300-301 

styles 

applying themes using, 300-301 
customizing themes using, 303 
Support Libraries. See also v7 AppGompat Library 
adding to project, 296 
list of, 294 

supportsRtl attribute, application, 172 
Swing, 4 

swiping through fragments, 489—493 
Switch element, 205 
sync adapters, 864 

syncStateO method, ActionBarDrawerToggle, 607 
system image. See Android SDK (API level) 

T 

Tab Layout element, 499,501 
tab navigation 
about, 482-484, 493 
adding tabs to layout, 498-504 
compared to navigation drawers, 580 
fragments for, 483-488 
swiping between tabs, 489-493 
tasks, 78 
testing 

automated testing, 870 
emulator compared to device, 117 
on-device tests, 871 
unit tests, 870 
text attribute 
Button, 44, 203 
CheckBox, 206 
TextView, 33, 34, 50, 201 
text held. See EditText element 


textOff attribute 
Switch, 205 
ToggleButton, 204 
textOn attribute 
Switch, 205 
ToggleButton, 204 
textSize attribute, TextView, 201 
TextView element 
about, 33, 44, 201 
code for, 33-34,44-47,91 
setting text in, 64 
theme attribute 
AppBarLayout, 519 
application, 299, 300 
themes 
about, 84 

app bar requiring, 293 
applying to project, 299-300 
built-in, list of, 302 
customizing, 303 
for navigation drawers, 589-590 
removing app bar using, 308 
v7 AppGompat Library for, 294, 296-298 
threads 
about, 720 

background thread, 720-731, 736 
main thread, 127,720 
render thread, 720 
title attribute, 322 
toasts, 216 

ToggleButton element, 204 
toolbar 

adding as layout, 311-313, 316 
collapsing, 507,517-525 
for navigation drawers, 589 
replacing app bar with, 292, 306-313 
scrolling, 507,508-515 
Toolbar class, 306, 309, 314 
top-level activities, 249-250, 252-255, 290 
transactions, for fragments. See fragment transactions 

TJ 

unbindServiceQ method, ServiceConnection, 779 
unit tests, 870 
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Up button, 292,327-330 
update() method, SQLiteDatabase, 646, 698 
USB debugging, 109 
USB driver, installing, 109 
uses-permission element, 791 

v 

v4 Support Library, 294. See also Design Support Library 
v7 AppGompat Library 
about, 294 

adding to project, 296, 307 
AppCompatActivity class in, 297-298 
fragments using, 345 
Location Services using, 790 
navigation drawers using, 584 
notifications in, 756 
v7 GardView Library, 294, 542 
v7 RecyclerView Library, 294 

values resource folders. See string resources; dimension 
resources 

variables, setting, 126,127 
vertical constraints, 228 
view animations, 868 
ViewGroup class, 198, 200 
ViewHolder class, 546, 548 
ViewPager class, 489-493,501 
views. See also specific GUI components 
about, 44, 198-199 
aligning, 238 
biases for, 231 
centering, 230 

getting and setting properties, 199 
gravity for view contents, 182-183 
gravity for view placement, 184-185, 190 
height, 175,180,232-233 
ID, 44, 175, 199 
margins, 176,228-229 
methods associated with, 199 
weight, 179-181 
width, 175,232-233 


w 

website resources 
activity actions, types of, 101 
source code for examples, xxxvi 
USB drivers, 109 
WebView class, 866 
widgets. See also GUI components 
about, 869 

adding, in blueprint tool, 226 
constraints for. See constraint layout 
Workout app, 340-392, 394-432, 434—480 
activities, 346-347, 359-363, 381, 389, 421-423, 470 
adapters, 375-376 
back button, 413-415 
device sizes, supporting, 340-341, 394-398 
dynamic fragments, 434—436, 444—460 
fragment lifecycle, 439 

fragments, 342-344, 348-356, 359-363, 365-369, 
416-421 

fragment state, 427-431 

fragment transactions, 463-469, 472-475 

Java classes, 360 

layout, 471 

libraries, 345 

listener interface, 384—388 

list fragments, 3 7 2-3 74,37 7-3 78 

screen-specific resources, 402-409 

tablet AVD, 399-401 

wrap_content setting, width and height, 232 

x 

xmlns:android attribute, LinearLayout, 171 

Z 

zipalign tool, 845 
Zygote process, 846 
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Get up to speed on Agile 



Quickly learn what Agile development is all about on Safari, O'Reilly's 
online learning platform. Through books, videos, interactive tutorials, and live online 
training, you'll learn how to design and build products incrementally, test constantly, 

and release as often as you need to. 


Check out The Agile Sketchpad, a video course by David and Dawn Griffiths that helps you: 


■ See what it’s like to work on an Agile team. 

■ Discover how Agile helps you deliver value early, 
respond to change, and manage risk. 

■ Master the secrets of accurate estimation. 

■ Explore how test-driven development, continuous 
integration, and the 10-minute build help you 
deliver better software. 


- Learn why programming in a pair can be more 
effective than programming alone. 

- Find out how Agile techniques such as Kanban 
can help you identify and avoid disruptions to 
your development process. 

■ See how the five key values—communication, 
courage, feedback, simplicity, and respect-drive 
everything you do in an Agile project. 


Try Safari for free for 10 days and get 
up to speed with Agile. 

oreilly.com/go/agile-sketchpad 
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